/*
Site Name: Villar Lomba Portfolio
Author: Juan Carlos Villar Lomba

Stylesheet: Main Stylesheet

******************************************************************/
/* normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove default margin
 */
body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
    background: transparent;
    cursor: url('../images/cursor-pointer.svg'), auto;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
    outline: 0;
}


/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong,
.strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn,
em,
.em {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
    box-sizing: content-box;
    height: 0;
}

/*
 * proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens)
*/
p {
    -webkit-hyphens: auto;
    -epub-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/*
 * Addresses margins set differently in IE6/7.
 */
pre {
    margin: 0;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */
q {
    quotes: "\201C""\201D""\2018""\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
q:before,
q:after {
    content: '';
    content: none;
}

small,
.small {
    font-size: 75%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
  Lists
========================================================================== */
/*
 * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0;
}

/*
 * Addresses paddings set differently in IE6/7.
 */
menu {
    padding: 0 0 0 40px;
}

ol,
ul {
    padding: 0;
    list-style-type: none;
}

/*
 * Corrects list images handled incorrectly in IE7.
 */
nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
  Embedded content
========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
    border: 0;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 2 */
    margin: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: url('../images/cursor-pointer.svg'), auto;
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
    overflow: auto;
    /* 1 */
    vertical-align: top;
    /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    box-sizing: border-box;
}

.image-replacement,
.ir {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.clearfix,
.cf,
.comment-respond {
    zoom: 1;
}

.clearfix:before,
.clearfix:after,
.cf:before,
.comment-respond:before,
.cf:after,
.comment-respond:after {
    content: "";
    display: table;
}

.clearfix:after,
.cf:after,
.comment-respond:after {
    clear: both;
}

/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif !important;
    font-style: italic;
}

/******************************************************************
FONT FACE 
*********************/
/* créditos */
@font-face {
    font-family: 'Paskowy';
    src: url('../fonts/Paskowy.woff2') format('woff2'),
        url('../fonts/Paskowy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* texto grande*/
@font-face {
    font-family: 'VCR';
    src: url('../fonts/vcr_osd_mono_1.001-webfont.woff2') format('woff2'),
         url('../fonts/vcr_osd_mono_1.001-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* títulos galerías de fotos */
@font-face {
    font-family: 'Karma';
    src: url('../fonts/KarmaFuture-Regular.woff2') format('woff2'),
        url('../fonts/KarmaFuture-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* lotr */
@font-face {
    font-family: 'Ringbearer';
    src: url('../fonts/RingbearerMedium.woff2') format('woff2'),
        url('../fonts/RingbearerMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* TEXTO */
/* VT323, Inconsolata, camingo
@font-face {
    font-family: 'camingo';
    src: url('../fonts/CamingoCodeRegular.eot');
    src: url('../fonts/CamingoCodeRegular.eot') format('embedded-opentype'),
         url('../fonts/CamingoCodeRegular.woff2') format('woff2'),
         url('../fonts/CamingoCodeRegular.woff') format('woff'),
         url('../fonts/CamingoCodeRegular.ttf') format('truetype'),
         url('../fonts/CamingoCodeRegular.svg'Inconsolata',#CamingoCodeRegular') format('svg');
}*/
p {
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    word-break: break-word;
    word-break: break-word;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    -webkit-hyphenate-before: 2;
    -webkit-hyphenate-after: 3;
    hyphenate-lines: 3;
    -ms-font-feature-settings: "liga", "dlig";
    -o-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}

/******************************************************************
GENERAL STYLES
*********************/
html {
    width: 100%;
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* variables */

:root {
    --bg-color-main: #0F0F0F;
    --bg-color-secondary: #111111;
    --primary-color: #06D9B6;
    --secondary-color: #F54296;
    --default-border: 1px solid #333;
    --border-light-green: 1px solid #1eb199;
    --color-grey-1: #eeeeee;
    --color-grey-2: #6e6e6e;
    --color-grey-3: #363636;
    --color-grey-4: #181818;
    --font-family-1:'VT323', 'camingo', monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family-2:'VCR';
}

body {
    font-family: var(--font-family-1);
    font-size: 100%;
    line-height: 1.2;
    color: var(--color-grey-1);
    background-color: var(--secondary-color);
    -webkit-font-smoothing: antialiased;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    letter-spacing: .03em;
    cursor: url('../images/cursor-arrow.svg'), auto;
}

body.home {
    overflow: hidden;
    /*background-color: #070c10;*/
}
body.app-loaded{
    background-color: var(--bg-color-main);
}

a {
    text-decoration: none;
    outline: none !important;
    color: var(--color-grey-1);
}
a:hover{
    color: var(--secondary-color) !important;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: normal;
}

::-moz-selection {
    background: var(--primary-color);
    color: #222;
    text-shadow: none;
}

::selection {
    background: var(--primary-color);
    color: #222;
    text-shadow: none;
}

ul {
    list-style: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    zoom: 1;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

input:focus::-webkit-input-placeholder {
    opacity: .5;
}

input:focus:-moz-placeholder {
    opacity: .5;
}

input:focus::-moz-placeholder {
    opacity: .5;
}

input:focus:-ms-input-placeholder {
    opacity: .5;
}

[placeholder]:-ms-input-placeholder {
    opacity: .5;
}

.overline{
    position: relative;
}
.overline:after{
    content:"";
    position: absolute;
    top: 50%;left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-grey-1);
    margin-top: 1px;
}
.builder-tooltip{
    display: none;
}

/***********************************************************
  Transitions
  *****************/

a,
figure,
.main-header,
.main-header .contact,
.call-to-act,
.grid-opts .opt-bt,
.grid-opts p,
.project p span,
.project,
.project-info,
.project img,
.project .line-arrow,
.project-list-but .bars,
.project-list-but span,
.project-nav a:before,
.content-item figcaption,
.to-flickr,
.photos-item img,
.contact-side-form input,
.contact-side-form textarea,
.close-form,
.go-to-top,
.blocks-opener,
.project .img-bg-fx,
.work-page {
    transition: all 0.3s;
}

.skew-on-scroll{
    transition: transform .3s;
    will-change: transform;
}

/***********************************************************
  Colors & fx
*******************/
/* primary */
.b-bg {
    background-color: var(--primary-color)
}

.b-color {
    color: var(--primary-color)
}

.b-border-thin {
    border-right: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

/* primary dark */
.b-bg-dark {
    background-color: #94ab3a
}

.b-color-dark {
    color: #94ab3a
}

.b-border-thin-dark {
    border: 1px solid #94ab3a
}

/* secondary */
.b-bg-secondary {
    background-color: var(--secondary-color)
}

.b-color-secondary {
    color: var(--secondary-color)
}

.b-border-thin-secondary {
    border: 1px solid var(--secondary-color)
}

/* blanco */

.b-color-white {
    color: var(--color-grey-1)
}

/* color para postprocesado de fotos en sección photo: #005b76 */

/* scanlines */

body:after,
.contact-side-form:after,
.form-curtain:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
}

body.home:after {
    opacity: .1;
}

.contact-side-form:after {
    position: absolute;
}

/* transicion paginas */

.transition-cont {
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: all .2s;
}
.app-loaded .transition-cont {
    opacity: 1;
    pointer-events: auto;
}
.app-loaded.exiting .transition-cont {
    pointer-events: none;
}
.app-loaded.exiting .big-wrapper,
.app-loaded.exiting .info-section,
.app-loaded.exiting .main-header,
.app-loaded.exiting .project-content {
    pointer-events: none;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .6;
    transition: all .2s;
}
#pixel-curtain{
    position: fixed;
    top: 0;left:0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
}
#pixel-curtain .pixel {
  background-color: var(--primary-color);
  background-color: var(--secondary-color);
  float: left;
}
body.app-loaded #pixel-curtain .pixel {
  opacity: 0;
}
body.app-loaded.exiting #pixel-curtain .pixel{
  opacity: 1;
}
body.app-loaded.exiting #pixel-curtain{
    cursor: url('../images/cursor-loader.svg'), auto;
    pointer-events: auto;
}


/* background grid */

.grid-bg {
    overflow: hidden;
    position: fixed;
    z-index: -2;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: 1s;
    /* --- FONDO CUADRICULADO ---
    background-size: 40px 40px;
    background-image:
    -webkit-linear-gradient(left, #2a2a2a 1px, transparent 1px),
    -webkit-linear-gradient(#2a2a2a 1px, transparent 1px);
    background-image:
    -o-linear-gradient(left, #2a2a2a 1px, transparent 1px),
    -o-linear-gradient(#2a2a2a 1px, transparent 1px);
    background-image:
    linear-gradient(to right, #2a2a2a 1px, transparent 1px),
    linear-gradient(#2a2a2a 1px, transparent 1px);*/
    /* --- FONDO DE PUNTOS --- */
    background-size: 20px 20px;
    background-image: radial-gradient(circle, var(--color-grey-4) 1px, rgba(0, 0, 0, 0) 1px);
    /* --- FONDO DE LINEAS VERTICALES --- 
    background-size: 100px 100vh;
      background-image:
        -webkit-linear-gradient(left, #2a2a2a 1px, transparent 1px);
      background-image:
        -o-linear-gradient(left, #2a2a2a 1px, transparent 1px);
      background-image:
    linear-gradient(to right, #2a2a2a 1px, transparent 1px);*/
}
.page-template-page-lorem .grid-bg{
    background-size: 40px 40px;
    background-image: radial-gradient(circle, #e4e4e4 1px, rgba(0, 0, 0, 0) 1px);
}
.app-loaded .grid-bg {
    height: 100vh;
}


/***********************************************************
  Text
*******************/
.t-cap {
    /*font-family: 'edit_undo';*/
    font-family: var(--font-family-2);
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: -5px
}

.arrow {
    font-family: 'icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.arrow.left:before {
    content: "\e094";
}

.arrow.right:before {
    content: "\e095";
}

/* --- */

.big-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    width: calc(100% - 150px);
    margin-left: 150px;
    min-height: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-attachment: fixed;
    max-width: 1920px;
}

/*==========================================
 HOME 
 ===========================================*/

/* header */

.home-header {
    padding: 0;
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    -ms-flex-pack: center;
    align-items: center;
    -ms-flex-align: center;
    z-index: 90;
}

.home-header>div {
    margin-top: -50px;
}

.home-header h2 {
    margin: 0;
    font-size: 1.2em;
    float: left;
    position: relative;
    text-align: center;
    width: 100%;
    word-spacing: 5px;
}

.home-header h2 p {
    margin: 0;
}

.home-header h2 .nombre {
    line-height: 1em;
    font-size: 1.5em;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.home-header h2 .apellidos {
    font-size: 5.6em;
    letter-spacing: 2px;
    position: relative;
    word-spacing: -15px;
    display: inline-block;
    margin: 0;
    line-height: 0.8em;
    mix-blend-mode: difference;
}

.home-header h1 {
    font-size: 1.8em;
    line-height: 1em;
    margin: 0;
    text-align: center;
    float: right;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 5px;
    color: var(--color-grey-1);
}

.home-header h1>span {
    display: inline-block;
    position: relative;
}

.home-header h1 span.last {
    color: var(--secondary-color);
}

.home-header.maintenance h1 span.last {
    color: var(--primary-color);
}

/* glitch effect */

@keyframes glitch-text {
    0% {
        clip: rect(40px, 9999px, 53px, 0);
    }

    2% {
        clip: rect(15px, 9999px, 46px, 0);
    }

    4% {
        clip: rect(56px, 9999px, 78px, 0);
    }

    6% {
        clip: rect(93px, 9999px, 24px, 0);
    }

    8% {
        clip: rect(61px, 9999px, 1px, 0);
    }

    10% {
        clip: rect(26px, 9999px, 81px, 0);
    }

    12% {
        clip: rect(79px, 9999px, 63px, 0);
    }

    14% {
        clip: rect(39px, 9999px, 86px, 0);
    }

    16% {
        clip: rect(84px, 9999px, 60px, 0);
    }

    18% {
        clip: rect(91px, 9999px, 67px, 0);
    }

    20% {
        clip: rect(66px, 9999px, 84px, 0);
    }

    22% {
        clip: rect(28px, 9999px, 89px, 0);
    }

    24% {
        clip: rect(11px, 9999px, 76px, 0);
    }

    26% {
        clip: rect(58px, 9999px, 58px, 0);
    }

    28% {
        clip: rect(82px, 9999px, 97px, 0);
    }

    30% {
        clip: rect(27px, 9999px, 29px, 0);
    }

    32% {
        clip: rect(85px, 9999px, 67px, 0);
    }

    34% {
        clip: rect(47px, 9999px, 98px, 0);
    }

    36% {
        clip: rect(92px, 9999px, 24px, 0);
    }

    38% {
        clip: rect(41px, 9999px, 85px, 0);
    }

    40% {
        clip: rect(79px, 9999px, 71px, 0);
    }

    42% {
        clip: rect(21px, 9999px, 41px, 0);
    }

    44% {
        clip: rect(3px, 9999px, 95px, 0);
    }

    46% {
        clip: rect(29px, 9999px, 41px, 0);
    }

    48% {
        clip: rect(66px, 9999px, 47px, 0);
    }

    50% {
        clip: rect(54px, 9999px, 73px, 0);
    }

    52% {
        clip: rect(73px, 9999px, 61px, 0);
    }

    54% {
        clip: rect(76px, 9999px, 22px, 0);
    }

    56% {
        clip: rect(40px, 9999px, 59px, 0);
    }

    58% {
        clip: rect(6px, 9999px, 78px, 0);
    }

    60% {
        clip: rect(69px, 9999px, 84px, 0);
    }

    62% {
        clip: rect(35px, 9999px, 51px, 0);
    }

    64% {
        clip: rect(78px, 9999px, 84px, 0);
    }

    66% {
        clip: rect(62px, 9999px, 53px, 0);
    }

    68% {
        clip: rect(97px, 9999px, 46px, 0);
    }

    70% {
        clip: rect(55px, 9999px, 56px, 0);
    }

    72% {
        clip: rect(60px, 9999px, 83px, 0);
    }

    74% {
        clip: rect(19px, 9999px, 36px, 0);
    }

    76% {
        clip: rect(70px, 9999px, 54px, 0);
    }

    78% {
        clip: rect(69px, 9999px, 67px, 0);
    }

    80% {
        clip: rect(21px, 9999px, 78px, 0);
    }

    82% {
        clip: rect(91px, 9999px, 10px, 0);
    }

    84% {
        clip: rect(36px, 9999px, 40px, 0);
    }

    86% {
        clip: rect(45px, 9999px, 68px, 0);
    }

    88% {
        clip: rect(34px, 9999px, 4px, 0);
    }

    90% {
        clip: rect(99px, 9999px, 73px, 0);
    }

    92% {
        clip: rect(88px, 9999px, 43px, 0);
    }

    94% {
        clip: rect(7px, 9999px, 53px, 0);
    }

    96% {
        clip: rect(9px, 9999px, 5px, 0);
    }

    98% {
        clip: rect(22px, 9999px, 1px, 0);
    }

    100% {
        clip: rect(21px, 9999px, 69px, 0);
    }
}

.glitch:after {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, 180px, 0, 0);
    text-shadow: -3px -3px 0 var(--primary-color), -1px 0 red;
    animation: glitch-text 2s 2s infinite linear;
}

@keyframes glitch-text-b {
    0% {
        clip: rect(17px, 9999px, 89px, 0);
    }

    5% {
        clip: rect(48px, 9999px, 32px, 0);
    }

    10% {
        clip: rect(22px, 9999px, 17px, 0);
    }

    15% {
        clip: rect(32px, 9999px, 36px, 0);
    }

    20% {
        clip: rect(22px, 9999px, 46px, 0);
    }

    25% {
        clip: rect(48px, 9999px, 24px, 0);
    }

    30% {
        clip: rect(2px, 9999px, 41px, 0);
    }

    35% {
        clip: rect(94px, 9999px, 16px, 0);
    }

    40% {
        clip: rect(4px, 9999px, 10px, 0);
    }

    45% {
        clip: rect(90px, 9999px, 52px, 0);
    }

    50% {
        clip: rect(8px, 9999px, 74px, 0);
    }

    55% {
        clip: rect(21px, 9999px, 12px, 0);
    }

    60% {
        clip: rect(84px, 9999px, 21px, 0);
    }

    65% {
        clip: rect(58px, 9999px, 27px, 0);
    }

    70% {
        clip: rect(24px, 9999px, 35px, 0);
    }

    75% {
        clip: rect(44px, 9999px, 70px, 0);
    }

    80% {
        clip: rect(17px, 9999px, 66px, 0);
    }

    85% {
        clip: rect(42px, 9999px, 29px, 0);
    }

    90% {
        clip: rect(73px, 9999px, 17px, 0);
    }

    95% {
        clip: rect(69px, 9999px, 80px, 0);
    }

    100% {
        clip: rect(99px, 9999px, 50px, 0);
    }
}

.glitch:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, 180px, 0, 0);
    text-shadow: 5px 5px 0 var(--secondary-color), 1px 0 blue;
    animation: glitch-text-b 2s 2s infinite linear;
}

.home-header h3 {
    float: left;
    width: 100%;
    font-size: 1.1em;
    margin: 30px 0 0;
    line-height: 1.2em;
    color: var(--color-grey-1);
    text-align: center;
}

.home-header h3 p {
    max-width: 420px;
    text-align: center;
    display: inline-block;
    margin: 0;
}


/*==========================================
 INTERIOR
 ===========================================*/

/* header */
.main-header {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    width: 150px;
    height: 100%;
    margin: 0;
    border-right: var(--default-border);
    z-index: 100;
    background-color: var(--bg-color-secondary);
}

.side-form-on .main-header {
    transform: translateX(520px);
    -ms-transform: translateX(520px);
    background-color: #161616;
    border-left: var(--default-border);
}

.main-header hgroup {
    width: 100%;
    display: inline-block;
    transition: transform .3s;
    padding: 14px;
    border-bottom: var(--default-border);
    flex-shrink: 0;
    min-height: 60px;
    position: absolute;
    top: 0;
    left: 0;
}
.main-header hgroup a{
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
.main-header h2 {
    width: 100%;
    font-size: 1.9em;
    margin: 0 0 10px;
    letter-spacing: 1px;
    /*text-shadow: 4px 4px 0 #494949;*/
    display: flex;
    flex-direction: column;
}
.home .main-header h2{
    display: none;
}
.home.hide-nav .main-header h2,
.home.side-form-on .main-header h2{
    display: flex;
}

.main-header hgroup a {
    transition: none;
}

.main-header h2 span {
    width: 100%;
    line-height: 0.8em;
    margin: 0;
    position: relative;
}

.main-header h2 .name {
    font-size: 0em;
    color: transparent;
}
.main-header h2 .dot{
    margin-left: -3px;
}
.main-header h2 .dot2{
    margin-left: -13px;
}

.main-header h1 {
    font-size: .7em;
    line-height: .9em;
    margin: 0;
    text-align: right;
    color: var(--color-grey-2);
    width: 100%;
    max-width: 100px;
    position: relative;
}


@media only screen and (min-width: 1025px) {

    .main-header hgroup:hover h2 span:after,
    .main-header hgroup:hover h1:after {
        content: attr(data-text);
        position: absolute;
        left: -2px;
        top: 0;
        color: white;
        overflow: hidden;
        clip: rect(0, 180px, 0, 0);
        text-shadow: -3px -3px 0 var(--primary-color), -1px 0 red;
        animation: glitch-text .15s linear alternate-reverse;
    }

    .main-header hgroup:hover h1:before,
    .main-header hgroup:hover h2 span:before {
        content: attr(data-text);
        position: absolute;
        left: -2px;
        top: 0;
        color: white;
        overflow: hidden;
        clip: rect(0, 180px, 0, 0);
        text-shadow: 5px 5px 0 var(--secondary-color), 1px 0 blue;
        animation: glitch-text-b .3s linear alternate-reverse;
    }

    .main-header hgroup:hover h2,
    .main-header hgroup:hover h1 {
        color: var(--secondary-color);
        text-shadow: none;
        transition: 0s;
        transition-delay: .15s;
    }
}

/* link glitch effect */

@media only screen and (min-width: 1025px){
    .glitch-text-fx,
    .glitch-text-fx .glitch-text-fx__text,
    .glitch-text-fx svg,
    .glitch-text-fx path {
        transition: none !important;
    }

    .glitch-text-fx .glitch-text-fx__text {
        position: relative;
    }

    .glitch-text-fx:hover .glitch-text-fx__text:after {
        content: attr(data-text);
        position: absolute;
        left: -2px;
        top: -2px;
        color: white;
        overflow: hidden;
        clip: rect(0, 180px, 0, 0);
        text-shadow: -3px -3px 0 var(--primary-color), -1px 0 red;
        animation: glitch-text .3s linear alternate-reverse !important;
        width: 120%;
    }

    .glitch-text-fx:hover .glitch-text-fx__text:before {
        content: attr(data-text);
        position: absolute;
        left: -2px;
        top: 2px;
        color: white;
        overflow: hidden;
        clip: rect(0, 180px, 0, 0);
        text-shadow: 5px 5px 0 var(--secondary-color), 1px 0 blue;
        animation: glitch-text-b .3s linear alternate-reverse !important;
        width: 120%;
    }
}

/*
.app-loaded .main-header hgroup:hover h1{
  color: var(--secondary-color);
}*/
.mob-nav-bt {
    display: none;
}

.menu {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    height: 100%;
    padding: 20px 15px;
}
.menu .cab{
    color: var(--color-grey-2);
    width: 100%;
    text-align: right;
    font-size: 1.1em;
}

.menu a {
    font-size: 1.1em;
    padding: 0;
    margin-bottom: 0;
    word-spacing: -2px;
    position: relative;
    width: 100%;
    text-align: right;
}
.menu a .bracket{
    opacity: 0;
}
.menu a:hover .bracket{
    opacity: 1;
}
.menu a span {
    position: relative;
}

.menu a.play-blocks {
    border: 0 !important;
}

.menu a:last-child {
    margin-right: 0;
}

.menu a:hover {
    color: var(--secondary-color);
}

body.home .menu a.all,
body.italia .menu a.italia,
body.canarias .menu a.canarias,
body.island .menu a.island,
body.espana .menu a.espana,
body.american-outdoors .menu a.american-outdoors,
body.american-polis .menu a.american-polis{
    color: var(--secondary-color);
    pointer-events: none;
}


.contact {
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 6px;
    align-items: center;
    padding: 12px 0 14px;
    border-top: var(--default-border);
    border-bottom: var(--default-border);
}
.contact a {
    font-size: .8em;
    letter-spacing: .05em;
    color: var(--color-grey-1);
    font-family: var(--font-family-2);
    text-transform: uppercase;
}

.contact a.tel {
    letter-spacing: -2px;
}

.contact a.mobile {
    display: none;
}

.contact a:hover {
    color: var(--color-grey-1);
}

.contact a span {
    margin-right: 0;
    line-height: .8em;
}

body.side-form-on .contact a.side-form-bt span{
    color: var(--secondary-color);
}

.contact a.tel span {
    margin-right: 10px;
}

.contact a [class*="icon-"] {
    float: left;
    font-size: 1.15em;
}

.credits-code{
    margin: 0;
    width: 100%;
    display: flex;
    font-size: 1.6em;
    color: var(--color-grey-2);
    font-family: 'Paskowy';
    padding: 0;
    text-align: center;
    height: 52px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.credits-code span{
    margin-top: 4px;
}
.contact .terms{
    display: inline-block;
    margin: 0;
    width: 150px;
    color: #aaa;
}
footer .contact .terms{
    width: 100%;
    text-align: center;
    font-size: 1em;
}
.contact .terms a{
    font-size: .9em;
    margin:0;
    float: none;
    display: inline-block;
}
.contact .terms .sep{
    display: inline-block;
}
.home .contact {
    width: 100%;
    text-align: center;
}

.home .contact .cont {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    flex-pack: center;
}

.home .contact a {
    float: none;
    margin: 0 20px;
    color: var(--color-grey-1);
}

.home .contact a:before {
    bottom: 45%;
}

.home .contact a span {
    margin-right: 0;
}

.home .contact a .icon {
    margin-right: 6px;
    font-size: 1.2em;
    display: inline-block;
}

footer .contact {
    position: static;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
}

footer .contact p {
    float: left;
    margin: 0;
    padding: 0 30px;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 60px;
}
footer .contact .credits{
    color: #777;
    font-size: 1.6em;
    pointer-events: none;
    font-family: 'Paskowy';
    gap: 2px;
    padding: 5px 20px 0;
    border-left: var(--default-border);
    height: 100%;
}

footer .contact a {
    font-size: .9em;
    float: none;
    background-color: transparent;
    margin: 0;
}

footer .contact a [class*="icon-"] {
    font-size: 1.15em;
}
footer .credits-code{
    margin: 0;
    width: 100%;
    display: inline-block;
    margin-top: 30px;
    color: #656565;
}

/* section - info */

.info-section {
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100%;
    width: 340px;
    top: 0;
    left: 150px;
    z-index: 80;
    color: var(--color-grey-1);
    transition: all 0.45s;
    border-right: var(--default-border);
    background-color: var(--bg-color-secondary);
}

.info-section article {
    padding: 60px 30px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.info-section article .tech {
    float: left;
    width: 100%;
    margin: 0 0 10px;
    opacity: 0.6;
}

.info-section article .desc {
    font-size: 1.1em;
    float: left;
    margin: 0;
}

.info-section article .desc p {
    margin: 0 0 10px;
    max-width: 280px;
}

.info-section article .desc p:last-child {
    margin-bottom: 0;
}
.motive-lines.info{
    display: none;
}

h3.desc a {
    color: var(--primary-color);
    transition:none;
}

.exiting-to-project .info-section {
    opacity: 0;
}

.info-section .ante-cab {
    margin-top: 40px;
    margin-bottom: 0;
    display: inline-block;
    font-size: 1em;
}
.info-section .ante-cab a{
    color: var(--color-grey-2);
}

.cab-section {
    text-transform: lowercase;
    letter-spacing: -0.01em;
    font-family: 'VT323', camingo;
    font-size: 3em;
    line-height: 1em;
    margin-bottom: 5px;
    margin-top: 0;
    color: var(--secondary-color)
}

.single .cab-section,
.photo-grid .cab-section {
    margin-top: 0;
}

/* content */

.container {
    float: left;
    min-height: 100%;
    position: relative;
    width: calc(100% - 490px);
    margin-left: 490px;
    margin-top: 0;
    margin-bottom: 0;
    transition: all .35s;
}
.container.work-page{
    padding-top: 0;
}

.project-list-on .container {
    opacity: 0.01;
}
.page-template-page-about .container,
.single .container{
    padding-top: 60px;
}

/* addings bar */

.addings {
    width: 100%;
    height: 54px;
    padding: 0;
    border-bottom: var(--default-border);
    float: left;
    z-index: 80;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--bg-color-secondary);
}

.exiting-to-project .addings {
    opacity: 0;
    transition: all 0.3s;
}

/* grid options */

.grid-opts {
    padding: 0 25px;
    height: 100%;
    border-right: var(--default-border);
    margin: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
}

.grid-opts .opt-bt {
    width: 18px;
    height: 16px;
    float: left;
    position: relative;
    margin: 0;
    cursor: url('../images/cursor-pointer.svg'), auto;
}
.grid-opts .opt-bt span{
    transition: none !important;
}

.grid-opts .list span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-grey-1);
    opacity: .4;
}

.grid-opts .list .b2 {
    top: 7px;
}

.grid-opts .list .b3 {
    top: auto;
    bottom: 0;
}

.grid-opts .mossaic-big span {
    width: 7px;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-grey-1);
    opacity: .4;
}

.grid-opts .mossaic-big .sq2 {
    left: auto;
    right: 0;
}

.grid-opts .mossaic-big .sq3 {
    top: auto;
    bottom: 0;
}

.grid-opts .mossaic-big .sq4 {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
}

.grid-opts .mossaic-min span {
    position: absolute;
    top: -2px;
    left: 0;
    width: 7px;
    height: 12px;
    background-color: var(--color-grey-1);
    opacity: .4;
}
.grid-opts .mossaic-min .sq2 {
    top:auto;
    bottom: -2px;
    left: auto;
    right:0;
}

.grid-opts .list .on,
.grid-opts .mossaic-min .on,
.grid-opts .mossaic-big .on {
    transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform-origin: left top;
    -ms-transform-origin: left top;
    z-index: 1;
    opacity: 1;
}
.grid-opts .list:hover span,
.grid-opts .mossaic-min:hover span,
.grid-opts .mossaic-big:hover span {
    background-color: var(--secondary-color);
    opacity: 1;
}

.opt-list .grid-opts .list .on,
.opt-mossaic-min .grid-opts .mossaic-min .on,
.opt-mossaic-big .grid-opts .mossaic-big .on {
    transform: scaleX(1);
    -ms-transform: scaleX(1);
}

.grid-opts .opt-bt span {
    transition: all 0.15s;
}

/* filters */

.filters {
    margin: 0;
    padding: 0 25px;
}

.filters p {
    margin: 0;
    float: right;
    font-size: 1.2em;
    color: var(--color-grey-2);
    letter-spacing: .01em;
    display: flex;
    gap: 25px;
}

.filters p span {
    margin: 0;
}

.filters p .bt {
    position: relative;
    transition: all .2s;
    cursor: url('../images/cursor-pointer.svg'), auto;
}

/*.filters p .bt:before{
  content: "";
  position: absolute;
  top: 0;left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  z-index: -1;
  transform:scaleX(0);
  -ms-transform:scaleX(0);
  transition:all .2s;
  transform-origin:left;
  -ms-transform-origin:left;
}
.filters p .bt:hover:before,
.filters p .bt.on:before{
  transform:scaleX(1);
  -ms-transform:scaleX(1);
}
.exiting-to-project .filters p .bt.on:before{
  transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform-origin:right;
  -ms-transform-origin:right;
  display: none;
  opacity: 0;
}*/
.filters p .bt:hover,
.filters p .bt.on {
    color: var(--secondary-color);
}

.filters p span.on {
    pointer-events: none;
}

.filters .hvr-ufl {
    margin: 0;
}

/* work grid */

.work-grid {
    margin: 40px 0 80px;
    padding: 0 60px;
    float: left;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
}

.opt-mossaic-big .work-grid {
    margin: 30px 0 80px;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    display: none;
    /* se muestra mediante jquery en carga */
    -ms-flex-align: start;
    align-items: flex-start;
}

.project,
.list-cab {
    float: left;
    width: 80%;
    margin: 0;
    position: relative;
    font-size: 1.1em;
}

.exiting .project a.rem {
    opacity: 0;
    transition: all 0.45s;
    -ms-transform: translateX(60px);
    transform: translateX(60px);
}

.exiting .project a.rem.active {
    opacity: 1;
    margin-left: 0;
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/*
.exiting .project a.rem.active .project-info{
  border:0;
}*/
.list-cab {
    border-bottom: 1px solid #aaa;
}

.list-cab p {
    padding: 10px 10% 30px;
    font-size: 1.2em;
    margin: 0;
}

.opt-mossaic-big .list-cab {
    display: none;
}

.exiting-to-project .list-cab {
    transition: all 0.3s;
    opacity: 0;
}

.opt-mossaic-big .project,
.opt-mossaic-big.filtered .project.featured {
    margin: 30px 20px 40px;
    font-size: 1em;
    -ms-transform: none;
    transform: none;
    width: calc(100%/3 - 40px);
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    padding: 8px 8px 25px;
    background-color: #000;
}

.opt-mossaic-big .project.featured {
    width: calc(100%/2 - 40px);
}

.project>a {
    float: left;
    width: 100%;
}
.opt-mossaic-big .project > a{
    pointer-events: none;
}
.opt-mossaic-big .project > a:not(.img-loaded):after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    animation: spin 1s linear infinite;
    height: 10px;
    width: 10px;
    transform: translate(-50%,-50%) scale(.4);
    -ms-transform: translate(-50%,-50%) scale(.4);
}
.opt-mossaic-big .project > a.img-loaded{
    pointer-events: auto;
}

.project figure {
    width: 100%;
    float: left;
    display: none;
    overflow: hidden;
}

.project:hover figure {
    opacity: 1;
}

.opt-mossaic-big.filtered .project.featured figure,
.opt-mossaic-big .project figure {
    display: inline-block;
    min-height: 180px;
    position: relative;
    transition: all 0.3s;
    opacity: .8;
}

.opt-mossaic-big .project:hover .img-loaded figure {
    opacity: 1;
}

.opt-mossaic-big .project.featured figure {
    min-height: 280px;
}

.opt-mossaic-big .project figure>span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .8;
    transition: all .3s;
    background-size: cover;
    background-repeat: no-repeat;
}

.project figure img {
    width: 100%;
    margin: 0;
}

.opt-mossaic-big .project figure {
    position: relative;
    opacity: 0;
    transition: all .3s;
    transform: translateX(-30px);
    -ms-transform: translateX(-30px);
}
.opt-mossaic-big .project .img-loaded figure {
    opacity: 1;
    transform: translateX(0);
    -ms-transform: translateX(0);
}
/*@media only screen and (min-width: 1025px){
    .opt-mossaic-big .project:hover .img-loaded figure{
        transform: translateX(10px);
        -ms-transform: translateX(10px);
    }
}*/

.project .project-info {
    font-size: 1.1em;
    color: var(--color-grey-1);
    float: left;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 30px 0;
    letter-spacing: 1px;
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
.opt-list .project .project-info{
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.exiting .project a.rem.active .project-info,
.project:hover .project-info{
  border:1px solid var(--primary-color);
}*/
.opt-mossaic-big .project .project-info {
    border: 0;
    padding: 0;
    letter-spacing: 1px;
    height: 100%;
    width: 100%;
    max-height: 100%;
    opacity: 0;
    transition: all .3s;
    transform: translateX(-30px);
    -ms-transform: translateX(-30px);
}
.opt-mossaic-big .project .img-loaded .project-info {
    opacity: 1;
    transform: translateX(0);
    -ms-transform: translateX(0);
}

.opt-mossaic-big .project a.rem .project-info {
    opacity: 0
}

.exiting .project a.rem.active h4,
.project:hover h4 {
    color: var(--secondary-color);
}

.opt-mossaic-big .project .title .hvr-ufl {
    padding: 0;
}

.project .title {
    margin: 0;
    line-height: 1.1em;
    float: left;
    width: 40%;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: lowercase;
}

.opt-mossaic-big .project .title {
    font-size: 1.8em;
    width: 100%;
    max-width: 100%;
    line-height: .8em;
    white-space: normal;
    text-overflow: initial;
    margin-bottom: 0;
    margin-top: 10px;
    letter-spacing: 0;
}

.opt-mossaic-big .project.featured .title {
    font-size: 2em;
}

.opt-mossaic-big.filtered .project.featured .title {
    font-size: 2em;
}

.project p {
    margin: 0;
    float: left;
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.opt-mossaic-big .project p {
    position: absolute;
    bottom: -21px;
    font-size: .8em;
    width: calc(100% - 16px);
    margin-top: 0;
    text-transform: uppercase;
}

.project p span {
    float: left;
    width: 50%;
    text-align: right;
    margin-bottom: 2px;
}

.project p .date {
    text-align: center;
    color: var(--color-grey-1);
}

.opt-mossaic-big .project .project-info .date {
    position: absolute;
    top: -25px;
    right: 0px;
    letter-spacing: 2px;
    pointer-events: none;
    padding: 0;
    color: var(--primary-color);
    z-index: 1;
    font-size: .8em;
    font-family: var(--font-family-2);
    opacity: 0;
}

.exiting-to-project .project p .category,
.exiting-to-project .project p .date {
    opacity: 0;
    transform: translateX(12px);
    -ms-transform: translateX(12px);
}

.project p .sep {
    display: none;
}

.opt-mossaic-big .project p span {
    float: none;
    width: auto;
    margin-bottom: 0;
}

.opt-mossaic-big .project p .category {
    color: var(--primary-color);
}

.opt-mossaic-big .project .project-info .category {
    font-size: 1em;
    max-width: 100%;
    transition: all .3s;
    color: #999;
}

.opt-mossaic-big .project p .sep {
    display: none;
}

.project .line-arrow {
    width: 80px;
    height: 1px;
    background-color: var(--color-grey-2);
    transform: scaleX(.1);
    -ms-transform: scaleX(.05);
    transform-origin: left top;
    -ms-transform-origin: left top;
}

.project:hover .line-arrow {
    transform: scaleX(1);
    -ms-transform: scaleX(1);
    background-color: var(--secondary-color);
}

.exiting-to-project .project .line-arrow {
    transform-origin: right top;
    -ms-transform-origin: right top;
    transform: scaleX(0) !important;
    -ms-transform: scaleX(0);
}

.opt-mossaic-big .project .line-arrow {
    display: none
}

@keyframes glitch-image {
    0% {
        clip: rect(67px, 9999px, 129px, 0);
    }

    5% {
        clip: rect(29px, 9999px, 173px, 0);
    }

    10% {
        clip: rect(10px, 9999px, 14px, 0);
    }

    15% {
        clip: rect(89px, 9999px, 135px, 0);
    }

    20% {
        clip: rect(22px, 9999px, 119px, 0);
    }

    25% {
        clip: rect(25px, 9999px, 169px, 0);
    }

    30% {
        clip: rect(94px, 9999px, 136px, 0);
    }

    35% {
        clip: rect(43px, 9999px, 146px, 0);
    }

    40% {
        clip: rect(60px, 9999px, 152px, 0);
    }

    45% {
        clip: rect(97px, 9999px, 193px, 0);
    }

    50% {
        clip: rect(80px, 9999px, 170px, 0);
    }

    55% {
        clip: rect(25px, 9999px, 164px, 0);
    }

    60% {
        clip: rect(32px, 9999px, 130px, 0);
    }

    65% {
        clip: rect(51px, 9999px, 138px, 0);
    }

    70% {
        clip: rect(19px, 9999px, 121px, 0);
    }

    75% {
        clip: rect(94px, 9999px, 133px, 0);
    }

    80% {
        clip: rect(79px, 9999px, 167px, 0);
    }

    85% {
        clip: rect(20px, 9999px, 14px, 0);
    }

    90% {
        clip: rect(83px, 9999px, 134px, 0);
    }

    95% {
        clip: rect(21px, 9999px, 113px, 0);
    }

    100% {
        clip: rect(84px, 9999px, 136px, 0);
    }
}

@keyframes glitch-image-b {
    0% {
        clip: rect(248px, 9999px, 276px, 0);
    }

    5% {
        clip: rect(290px, 9999px, 250px, 0);
    }

    10% {
        clip: rect(257px, 9999px, 248px, 0);
    }

    15% {
        clip: rect(290px, 9999px, 289px, 0);
    }

    20% {
        clip: rect(253px, 9999px, 266px, 0);
    }

    25% {
        clip: rect(284px, 9999px, 200px, 0);
    }

    30% {
        clip: rect(297px, 9999px, 228px, 0);
    }

    35% {
        clip: rect(234px, 9999px, 263px, 0);
    }

    40% {
        clip: rect(264px, 9999px, 210px, 0);
    }

    45% {
        clip: rect(229px, 9999px, 230px, 0);
    }

    50% {
        clip: rect(223px, 9999px, 213px, 0);
    }

    55% {
        clip: rect(279px, 9999px, 237px, 0);
    }

    60% {
        clip: rect(272px, 9999px, 232px, 0);
    }

    65% {
        clip: rect(272px, 9999px, 240px, 0);
    }

    70% {
        clip: rect(200px, 9999px, 270px, 0);
    }

    75% {
        clip: rect(252px, 9999px, 225px, 0);
    }

    80% {
        clip: rect(257px, 9999px, 231px, 0);
    }

    85% {
        clip: rect(234px, 9999px, 285px, 0);
    }

    90% {
        clip: rect(290px, 9999px, 239px, 0);
    }

    95% {
        clip: rect(245px, 9999px, 213px, 0);
    }

    100% {
        clip: rect(289px, 9999px, 251px, 0);
    }
}

@media only screen and (min-width: 1025px) {
    .profile-pic .pixel {
        opacity: 1;
        clip: rect(0, 180px, 0, 0);
        box-shadow: 5px 5px 0 #222;
        z-index: 1;
        left: -5px;
        top: -5px;
    }

    .profile-pic .pixel-2 {
        opacity: 1;
        z-index: 1;
        clip: rect(0, 180px, 0, 0);
        left: 0;
        top: 5px;
        width: calc(100% + 5px);
        border-left: 5px solid #222;
    }

    .profile-pic:hover .pixel {
        animation: glitch-image .3s alternate-reverse step-end;
    }

    .profile-pic:hover .pixel-2 {
        animation: glitch-image-b .6s alternate-reverse step-end;
    }

    .profile-pic .pixel:after,
    .profile-pic .pixel-2:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--secondary-color);
        opacity: .4;
    }

    .profile-pic .pixel-2:after {
        background-color: var(--primary-color);
    }

    .profile-pic .pixel-3 {
        transition: all 0s;
        transition-delay: .2s;
        opacity: 1
    }
    .profile-pic:hover .pixel-3{
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: .65;
    }

}



@media only screen and (min-width: 1025px) {

    .project .img-bg-fx {
        position: absolute;
        top: 50%;
        left: 290px;
        width: 260px;
        height: 140px;
        overflow: hidden;
        z-index: -1;
        pointer-events: none;
        -ms-transform: translateY(-50%) translateX(-20px);
        transform: translateY(-50%) translateX(-20px);
        transition-delay: 0.05s;
        transition: transform .3s;
        opacity: 0;
    }
    .project:hover .img-bg-fx {
        opacity: .65;
        -ms-transform: translateY(-50%) translateX(0px);
        transform: translateY(-50%) translateX(0px);
    }

    .project .img-bg-fx span {
        display: inline-block;
        width: 250px;
        height: 100%;
        background-repeat: no-repeat;
        /*background-position: center;*/
        background-size: cover;
    }

    .project .img-bg-fx .pixel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        clip: rect(0, 180px, 0, 0);
    }

    .project .img-bg-fx .pixel:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--secondary-color);
        opacity: .2;
    }

    .project .img-bg-fx .no-pixel {
        opacity: 0;
    }

    .project:hover .img-bg-fx .no-pixel {
        opacity: 1;
        transition-delay: .2s;
    }

    .project:hover .img-bg-fx .pixel {
        animation: glitch-image .6s alternate-reverse step-end;
    }

    /*
  .project .img-bg-fx .pix-corners{
    display: none;
  }
  .project:hover .img-bg-fx .pix-corners{
    display: inline-block;
  }*/
}

.opt-mossaic-big .project .img-bg-fx {
    display: none
}
.opt-mossaic-big .project .motive-lines{
        display: block;
    }


/* next/prev ptoject */

.project-nav {
    z-index: 10;
    width: 100%;
    height: 53px;
    text-align: center;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-direction: row;
    -ms-flex-wrap: nowrap;
    justify-content: center;
    -ms-flex-pack: center;
    text-transform: lowercase;
    background-color: var(--bg-color-secondary);
    border-top: var(--default-border);
}

.project-nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 75px;
    padding: 0 15px;
    word-spacing: 3px;
    font-size: 1.1em;
    position: relative;
    text-align: left;
}
.project-nav a.next-project{
    text-align: right;
}
.project-nav a.index{
    text-align: center;
}

.project-nav a .text{
    width: 100%;
    display: flex;
    gap: 10px;
}

.project-nav a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -60px;
    width: 60px;
    height: 1px;
    background-color: #5f7481;
    transform: scaleX(.2) translateY(50%);
    -ms-transform: scaleX(.2) translateY(50%);
    transform-origin: right center;
    -ms-transform-origin: right center;
}

.project-nav a.next-project:before {
    transform-origin: left center;
    -ms-transform-origin: left center;
    left: auto;
    right: -60px;
}

.project-nav a:hover:before {
    transform: scaleX(1) translateY(50%);
    -ms-transform: scaleX(1) translateY(50%);
    background-color: var(--secondary-color);
}

.project-nav a.index:before {
    display: none;
}

.next-project {
    left: auto;
    right: 0;
}

.project-nav a:hover {
    color: var(--color-grey-1);
}
.project-nav a .target{
    color: var(--color-grey-1);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.project-nav a:hover .target{
    color: var(--secondary-color);
}

.project-nav .thumb{
    position: absolute;
    bottom: 26px;
    width: 240px;
    height: 130px;
    background-position: center;
    background-size: cover;
    opacity: 0;
    pointer-events: none;
    transition: all .2s;
    /*filter: grayscale(100%);*/
}
.project-nav .thumb:after{
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    background-color: var(--secondary-color);
    opacity: .4;
    clip: rect(0, 180px, 0, 0);
}
.project-nav .thumb:before{
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    opacity: .4;
    clip: rect(0, 180px, 0, 0);
}
.project-nav > a:hover .thumb:before {
    animation: glitch-image .2s linear alternate-reverse !important;
}

.project-nav > a:hover .thumb:after {
    animation: glitch-image .4s linear alternate-reverse !important;
}
.project-nav a.next-project .thumb{
    right:0;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.project-nav a.prev-project .thumb{
    left: 0;
    transform: translateX(50%);
    -ms-transform: translateX(50%);
}
.project-nav a.prev-project:hover .thumb{
    opacity: .4;
    transform: translateX(30%);
    -ms-transform: translateX(30%);
}
.project-nav a.next-project:hover .thumb{
    opacity: .4;
    transform: translateX(-30%);
    -ms-transform: translateX(-30%);
}

.project-nav-mob {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 58px;
    width: 100%;
    background-color: var(--bg-color-secondary);
    border-top: var(--default-border);
    display: none;
    z-index: -1;
    opacity: 0;
    pointer-events: none
}


.project-nav-mob svg {
    position: absolute;
    top: 8px;
    left: 0;
}

.project-nav-mob svg path {
    fill: var(--primary-color);
}

.project-nav-mob .prev-project {
    position: absolute;
    left: 20px;
    width: 35vw;
    padding-left: 32px;
    line-height: 1;
}

.project-nav-mob .next-project {
    position: absolute;
    right: 20px;
    width: 32vw;
    text-align: right;
    padding-right: 32px;
    line-height: 1;
}

.project-nav-mob .next-project svg {
    left: auto;
    right: 0;
}

.project-nav-mob .target{
    color: var(--color-grey-1);
    width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-transform: lowercase;
}
.project-nav-mob a span{
    pointer-events: none;
}


/* photo section */

.photos-hg .desc {
    margin-bottom: 30px;
    font-size: .91em;
    line-height: 1.4em;
}

.photos-hg .desc p {
    width: 82%;
}

.photos-item {
    display: inline-block;
    width: 25%;
    margin: 0 0 50px;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

.grid-sizer {
    width: 25%;
}

/* contact side form */

.contact-side-form {
    position: fixed;
    bottom: 0;
    left: 0;
    transform: translateX(-480px);
    -ms-transform: translateX(-480px);
    z-index: 99;
    width: 520px;
    height: 100%;
    pointer-events: none;
    transition: all 0.3s;
    border-right: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: #161616;
}

.side-form-on .contact-side-form {
    transform: translateX(0);
    -ms-transform: translateX(0);
    pointer-events: auto;
    opacity: 1;
}
.contact-side-form .form-box{
    position: relative;
}
.contact-side-form .close-form {
    float: right;
    height: 40px;
    width: 40px;
    font-size: 1.2em;
    position: absolute;
    top: 0;
    right: 0;
    cursor: url('../images/cursor-pointer.svg'), auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-side-form .close-form path {
    fill: #fff;
    transition: none;
}

.contact-side-form .close-form:hover path {
    fill: var(--secondary-color);
}

.contact-side-form .close-form>span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
}

.contact-side-form .close-form:hover {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.contact-side-form .wpcf7 {
    width: 100%;
    height: 576px;
    opacity: 0;
    transition: all 0.2s;
    transition-delay: 0s;
    margin: 0;
    padding: 20px 20px 25px;
}

.side-form-on .contact-side-form .wpcf7 {
    opacity: 1;
}

.contact-side-form p {
    margin: 0;
    position: relative;
    float: left;
    width: 100%;
}

.contact-side-form .cab {
    position: absolute;
    top: -55px;
    left: 0;
    font-size: 1.8em;
    letter-spacing: 0;
    width: 100%;
    text-align: center;
    color: var(--primary-color);
    /**/
    display: none;
}

.contact-side-form input,
.contact-side-form input:focus,
.contact-side-form textarea,
.contact-side-form .to {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px dashed var(--color-grey-2);
    padding: 12px;
    color: var(--color-grey-1);
    letter-spacing: 0;
    outline: none;
    margin: 0 0 5px;
    font-size: 1.1em;
    /*background-color: rgba(255,255,255,.03)*/
}
.contact-side-form .to{
    color: var(--color-grey-2);
    font-size: 1.2em;
}
.contact-side-form .to span{
    margin: 0 4px;
}

.contact-side-form textarea {
    min-height: 320px;
    max-height: 320px;
}

.contact-side-form input[type=submit] {
    width: auto;
    font-family: var(--font-family-2);
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: -2px;
    padding: 10px 20px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
}

.contact-side-form input[type=submit]:hover {
    color: var(--primary-color);
}

.sub-bt {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1.2em;
    letter-spacing: 2px;
    transition: none;
    cursor: url('../images/cursor-pointer.svg'), auto;
    border: 1px solid;
    padding: 4px 20px;
}

.sub-bt:hover {
    color: var(--secondary-color);
}

.sub-bt span {
    height: 20px;
    line-height: 20px;
}

div.wpcf7 .ajax-loader {
    width: 16px;
    height: 16px;
    background-size: 16px;
    position: absolute;
    bottom: 1px;
    left: 100px;
}

div.wpcf7 img.ajax-loader {
    margin-left: 20px;
    width: 20px;
    margin-top: -5px;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
    color: var(--color-grey-2) !important;
    letter-spacing: 0.5px;
    opacity: 1;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: var(--color-grey-2) !important;
    letter-spacing: 0.5px;
    opacity: 1;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: var(--color-grey-2) !important;
    letter-spacing: 0.5px;
    opacity: 1;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: var(--color-grey-2) !important;
    letter-spacing: 0.5px;
    opacity: 1;
}

.wpcf7-form-control-wrap {
    position: static;
}

span.wpcf7-not-valid-tip {
    color: transparent;
    font-size: 0;
    width: 100%;
    height: 2px;
    background-color: var(--secondary-color);
    position: absolute;
    top: 0;
    left: 0;
    /**/
    display: none;
}

.contact-side-form .wpcf7-not-valid {
    border-color: var(--secondary-color);
}

div.wpcf7-validation-errors {
    color: var(--secondary-color);
}

div.wpcf7-response-output {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    bottom: 25px;
    right: 20px;
    font-size: 1.1em;
    line-height: 1em;
    max-width: 340px;
    display: flex;
    align-items: center;
    height: 32px;
}
.invalid div.wpcf7-response-output{
    color: var(--secondary-color);
}
.sent div.wpcf7-response-output{
    color: var(--primary-color);
}

div.wpcf7-mail-sent-ok {
    color: var(--primary-color);
}

.side-form-on .side-form-bt {
    color: var(--color-grey-1);
}

.wpcf7-spinner{
    margin: 0;
    position: absolute;
    bottom: 5px;
    left: 100px;
}

/* form curtain */

.form-curtain {
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 97;
    opacity: 0;
    background-color: var(--bg-color-main);
    background-size: 20px 20px;
    background-image: radial-gradient(circle, #161616 1px, rgba(0, 0, 0, 0) 1px);
    transition: opacity 0.2s;
    pointer-events: none;
}

body.single-galleries .form-curtain,
body.page-template-page-photo .form-curtain{
    background-image: radial-gradient(circle, #161616 1px, rgba(0, 0, 0, 0) 1px);
}

.side-form-on .form-curtain {
    opacity: 0.98;
    pointer-events: auto;
    cursor: url('../images/cursor-close.svg'), pointer;
}

.contact-side-form .fill-image{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    background-color: #222;
    background-size: cover;
    background-position: center right;
}
.contact-side-form .fill-image .text{
    font-size: 5em;
    text-align: center;
    color: #161616;
    opacity: .6;
}

/* footer */

footer {
    float: left;
    width: 100%;
    padding: 0 0 60px;
    display: none;
}
footer p {
    color: var(--color-grey-1);
}
.go-to-top {
    display: none;
}


/* Motive lines */

.motive-lines {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 30px;
    pointer-events: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 10;
}
.motive-lines.left{
    width: 60px;
    height: 100%;
    bottom: 0;
    left: -1px;
    flex-direction: row;
}
.motive-lines.top {
    top: -1px;
    left: 0;
    bottom: auto;
}

.motive-lines div {
    width: 100%;
    height: calc(100%/4);
    background-color: var(--bg-color-main);
}
figure .motive-lines div{
    background-color: var(--bg-color-main);
}
.motive-lines.left div{
    height: 100%;
    width: calc(100%/4);
}
.motive-lines.small div{
    height: calc(100%/6);
    width: 100%;
}
.motive-lines.small.left div{
    height: 100%;
    width: calc(100%/6);;
}
.single-galleries .motive-lines div {
    background-color: var(--bg-color-main);
}

.motive-lines div:nth-child(1) {opacity: .2}
.motive-lines div:nth-child(2) {opacity: .4}
.motive-lines div:nth-child(3) {opacity: .6}
.motive-lines div:nth-child(4) {opacity: .8}

.motive-lines.top div:nth-child(1) {opacity: .8}
.motive-lines.top div:nth-child(2) {opacity: .6}
.motive-lines.top div:nth-child(3) {opacity: .4}
.motive-lines.top div:nth-child(4) {opacity: .2}

.motive-lines.small div:nth-child(1) {opacity: .14}
.motive-lines.small div:nth-child(2) {opacity: .28}
.motive-lines.small div:nth-child(3) {opacity: .42}
.motive-lines.small div:nth-child(4) {opacity: .56}
.motive-lines.small div:nth-child(5) {opacity: .70}
.motive-lines.small div:nth-child(6) {opacity: .84}

.motive-lines.small.top div:nth-child(6) {opacity: .14}
.motive-lines.small.top div:nth-child(5) {opacity: .28}
.motive-lines.small.top div:nth-child(4) {opacity: .42}
.motive-lines.small.top div:nth-child(3) {opacity: .56}
.motive-lines.small.top div:nth-child(2) {opacity: .70}
.motive-lines.small.top div:nth-child(1) {opacity: .84}

.motive-lines.small.left div:nth-child(6) {opacity: .14}
.motive-lines.small.left div:nth-child(5) {opacity: .28}
.motive-lines.small.left div:nth-child(4) {opacity: .42}
.motive-lines.small.left div:nth-child(3) {opacity: .56}
.motive-lines.small.left div:nth-child(2) {opacity: .70}
.motive-lines.small.left div:nth-child(1) {opacity: .84}

/* texto diapositiva */

.code-text{
    display: flex;
    justify-content: space-between;
    width: calc(100% - 16px);
    position: absolute;
    bottom: 5px;
    left: 8px;
    font-size: .8em;
    color: var(--color-grey-3);
}
.page-template-page-work.opt-list .code-text,
.photos-item .code-text{
    display: none;
}
.photos-item .img-loaded .code-text{
    display: flex;
}

/* scroll progress */

.scroll-progress{
    position: fixed;
    bottom:0;
    right: 0;
    width: calc(100% - 490px);
    height: 4px;
    pointer-events: none;
    z-index: 90;
    transition: all .3s;
}

.scroll-progress .bar{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--secondary-color);
}



.soc-box{
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -ms-flex-pack:space-between;
    align-items: flex-end;
    -ms-align-items:flex-end;
}
.soc-box .soc-bt svg{
    width: 24px;
    height: 19px;
}
.soc-box .soc-bt.lin svg{
    width: 24px;
    height: 19px;
}
.soc-box .soc-bt.ins svg{
    width: 24px;
    height: 19px;
}
.soc-box .soc-bt:hover svg{
    fill: var(--secondary-color);
}



/* 404 page */

@media only screen and (max-width: 1400px) {
    body.error404 footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: auto;
        padding-bottom: 0;
        width: 100%;
    }
    body.error404 footer .contact{
        margin-bottom: 0;
    }
    body.error404 .info-section {
        border-bottom: 0;
    }
}

.error404 .cab-section {
    font-family: var(--font-family-2);
    letter-spacing: 0;
    font-size: 5em;
    letter-spacing: -1px;
    position: relative;
    margin-top: 32px;
    color: var(--color-grey-1);
}
.error404 .cab-section:after {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, 180px, 0, 0);
    text-shadow: -3px -3px 0 var(--primary-color), -1px 0 red;
    animation: glitch-text-apellidos 2s infinite step-end;
}

.error404 .cab-section:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    top: 0;
    color: white;
    overflow: hidden;
    clip: rect(0, 180px, 0, 0);
    text-shadow: 5px 5px 0 var(--secondary-color), 1px 0 blue;
    animation: glitch-text-b-apellidos 2s infinite step-end;
}

.error404 .error-mountains{
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -ms-flex-pack:space-between;
    align-items: flex-end;
    -ms-align-items:flex-end;
    height: 120px;
    position: fixed;
    bottom: 0;
    right: 160px;
}
.error404 .error-mountains svg{
    height: 120px;
    width: 240px;
}
.error404 .error-mountains .two{
    width: 156px;
    height: 90px;
}

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

    .error404 .info-section article .cab-section,
    .error404 .info-section article .desc {
        max-width: 260px;
    }

    .error404 .cab-section {
        margin-top: 0
    }
}

@media only screen and (max-width: 480px) {
    .error404 .cab-section {
        font-size: 4em;
    }
}
@media only screen and (max-width: 1024px) {
    .error404 .error-mountains{
        right: 30px;
    }
}
@media only screen and (max-width: 768px) {
    .error404 .error-mountains{
        display: none
    }
}


/* LEGAL TEXTS */

.legal-text{
    width: 100%;
    max-width: 800px;
    font-size: 1.1em;
}


/* RANDOM PHOTO */

.random-photo{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color-secondary);
    background-image:radial-gradient(circle, #222 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 40px 40px;
}
.random-photo .photo{
    max-width: 80vw;
    max-height: 80vh;
    pointer-events: none;
    border-radius: 2px;
}
@media only screen and (max-width: 768px) {
    .random-photo .photo{
        max-width: 90vw;
        max-height: 90vh;
    }
}








/******************************************
 PLUGINS 
 *****************************************/

/*=======
    lazy loading
======= */

img.b-lazy {
    transition: all 0.3s;
    opacity: 0;
}

img.proj-color.b-lazy:not(.proj-color) {
    max-width: 100%;
}

img.b-lazy.b-loaded {
    opacity: 1;
}


/* Magnific Popup CSS */


.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 105;
    overflow: hidden;
    position: fixed;
    opacity: 1;
    background-color: var(--bg-color-main);
    transition: transform 0.3s;
    transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform-origin: left top;
    -ms-transform-origin: left top;
    background-size: 20px 20px;
    background-image: radial-gradient(circle, #161616 1px, rgba(0, 0, 0, 0) 1px);
}

.mfp-bg.mfp-ready {
    transform: scaleX(1);
    -ms-transform: scaleX(1);
}

.mfp-bg.mfp-removing {
    transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform-origin: right top;
    -ms-transform-origin: right top;
}

.mfp-wrap {
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100vh !important;
    z-index: 110;
    position: fixed !important;
    outline: none !important;
    -webkit-backface-visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
    /*border-left: 220px solid transparent;*/
}
.mfp-wrap:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    animation: spin 1s linear infinite;
    height: 10px;
    width: 10px;
    transform: translate(-50%,-50%) scale(.4);
    -ms-transform: translate(-50%,-50%) scale(.4);
}

.mfp-wrap.mfp-ready {
    opacity: 1;
    transition-delay: 0.3s;
}

.exiting .mfp-wrap.mfp-ready {
    opacity: 0;
    transition: all 0.6s;
    transition-delay: 0.45s;
    left: 100%;
}

.mfp-wrap.mfp-removing {
    opacity: 0;
    transition-delay: 0s;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 30px;
    box-sizing: border-box;
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

/*
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }
  */

.mfp-zoom {
    cursor: url('../images/cursor-pointer.svg'), auto;
    cursor: zoom-in;
    cursor: none;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
    cursor: none;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

.mfp-preloader a {
    color: #CCC;
}

.mfp-preloader a:hover {
    color: var(--color-grey-1);
}

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

.mfp-close,
.mfp-arrow {
    background-color: transparent;
    -webkit-appearance: none;
    display: block;
    outline: none;
    z-index: 1046;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    position: fixed;
    top: 0;
    right: 0;
    text-align: center;
    padding: 0;
    border: 0;
    width: 60px;
    height: 60px;
    color: #328bba;
    transition: all 0.3s;
    opacity: 1;
    line-height: 1.4em;
    font-family: 'icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mfp-arrow-left {
    right: auto;
    left: 0;
}

.mfp-arrow-right {
    right: auto;
    left: 60px;
}

.mfp-close:hover,
.mfp-arrow:hover {
    color: var(--color-grey-1);
}

/*
.mfp-close:before,
.mfp-arrow:before{
  content:"\e117";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  font-size: 16px;
}
.mfp-arrow-left:before {content:"\e094";line-height: 16px}
.mfp-arrow-right:before {content:"\e095";line-height: 16px}*/
.mfp-close svg,
.mfp-arrow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    pointer-events: none
}

.mfp-close path,
.mfp-arrow path {
    fill: #fff;
}

.mfp-close:hover path,
.mfp-arrow:hover path {
    fill: var(--secondary-color);
}

.mfp-arrow-left svg.right {
    display: none
}

.mfp-arrow-right svg.left {
    display: none
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 1100px;
    height: auto;
    max-height: 90vh !important;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 20px auto;
    transition: all 0.3s;
}

/* The shadow behind the image */
.mfp-figure {
    line-height: 0;
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
}

.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-figure figure figcaption {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    /*border-bottom: var(--default-border);
    background-color: var(--secondary-color);*/
}

.mfp-bottom-bar {
    width: 100%;
    max-width: 360px;
    padding: 0 20px;
}

.mfp-title {
    line-height: 1;
    letter-spacing: .05em;
    font-size: 1em;
    width: 100%;
    padding: 0;
    color: var(--color-grey-1);
    opacity: .85;
    font-weight: 500;
    position: fixed;
    bottom: 10px;
    left: 30px;
    width: calc(100% - 60px);
    max-width: 300px;
    padding-left: 40px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 12px;
    min-height: 40px;
    text-indent: -9999px;
    width: 40px;
    z-index: 999;
}

.mfp-title.on {
    text-indent: initial;
    width: auto;
}

.mfp-title.on:after {
    content: attr(data-text);
    position: absolute;
    left: 0px;
    top: 6px;
    max-width: 300px;
    padding-left: 40px;
    color: white;
    overflow: hidden;
    clip: rect(0, 180px, 0, 0);
    text-shadow: -3px -3px 0 var(--primary-color), -1px 0 red;
    animation: glitch-text .3s linear alternate-reverse;
}

.mfp-title:before {
    content: "i";
    width: 30px;
    height: 30px;
    border-radius: 20px;
    font-size: 2em;
    position: absolute;
    color: var(--color-grey-1);
    bottom: 9px;
    left: 0;
    text-indent: initial;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.mfp-title:hover:before,
.mfp-title.on:before {
    color: var(--secondary-color);
}
.mfp-title.on:before{
    content: "";
    background-image: url('../images/close-bt.png');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center 9px;
}

.mfp-title.hide {
    opacity: 0;
    pointer-events: none;
}

.mfp-title span,
.mfp-title p {
    display: inline-block;
    margin-right: 10px;
}

.mfp-title .copy {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .8em;
    font-size: 10px;
    color: #aaa;
}

.mfp-title .copy .icon-camera {
    font-size: 12px;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    margin-left: 5px;
}

.mfp-title .copy .icon-camera:before {
    position: absolute;
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}

.mfp-counter {
    position: fixed;
    top: 30px;
    left: 140px;
    color: var(--primary-color);
    font-weight: 700;
}

.mfp-title .mfp-counter {
    display: inline-block;
    color: var(--primary-color);
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: url('../images/cursor-pointer.svg'), auto;
}


@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {

    /**
       * Remove all paddings around the image on small screen
       */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box;
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0;
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 1024px) {
    .mfp-figure figure figcaption {
        height: 50px
    }

    .mfp-close,
    .mfp-arrow {
        width: 50px;
        height: 50px
    }

    .mfp-close svg,
    .mfp-arrow svg {
        width: 16px !important;
        height: 16px !important;
    }

    .mfp-arrow-right {
        left: 50px
    }

    .mfp-counter {
        left: 120px;
        top: 25px;
    }

    img.mfp-img {
        padding: 70px 0 20px
    }
}

@media all and (max-width: 768px) {
    .mfp-figure figure figcaption {
        top: auto;
        bottom: 0;
        background-color: transparent;
    }

    img.mfp-img {
        padding: 0;
    }
}

@media all and (max-width: 768px) {
    .mfp-title {
        font-size: .85em;
        line-height: 1.1
    }
}

/* ===================
        Blocks
====================== */

/* opener button */

.blocks-opener {
    padding: 10px 15px 0;
    height: 100%;
    cursor: url('../images/cursor-pointer.svg'), auto;
    pointer-events: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blocks-opener.active {
    pointer-events: auto;
}        
.blocks-opener.active .explicacion{
    position: absolute;
    top: -25px;
    right: 0;
    opacity: 0;
    pointer-events: none;
    width: 95px;
}
.blocks-opener.active:hover .explicacion{
    opacity: 1;
}
.blocks-opener svg{
    width: 38px;
}
.blocks-opener svg path{
    fill: #7c7c7c;
}
body.blocks-game-on .blocks-opener.active svg path,
.blocks-opener.active:hover svg path{
    fill: var(--secondary-color);
}
/* general */
.game-blocks{
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 80px;
  right: 30px;
  background-color: var(--bg-color-secondary);
  padding: 8px 8px 25px;
}
body.blocks-game-on .game-blocks{
    opacity: 1;
    pointer-events:auto;
  z-index: 1;
}
@media only screen and (max-width: 1024px){
  .game-blocks{display: none}
}
.game-blocks .cont{
  margin: 0;
  display: flex;
  flex-direction: column;
}
.game-blocks .control-panel{
    display: flex;
  flex-direction: row;
  gap: 8px;
width: 100%;
padding: 8px 0 0;
}
.game-blocks .control-panel .leyenda{
  display: flex;
  flex-direction: column;
  font-size: .9em;
  color: var(--primary-color);
  margin:0;
}
#playarea{
  position: relative;
  width: 460px;
  height: 560px;
  background-color: #222;
  background-size: 20px 20px;
  background-image: radial-gradient(circle, #333 1px, rgba(0, 0, 0, 0) 1px);
  border-bottom: 2px solid #333;
}
/*#playarea.shake-1,
#playarea.shake-2,
#playarea.shake-3,
#playarea.shake-4,*/
#playarea.shake{
  border-color: var(--secondary-color);
}
body.game-blocks-started.game-paused #playarea canvas,
body.game-blocks-over #playarea canvas{
    opacity: .3;
}
.game-blocks-started #playarea canvas{
    opacity: 1;
}
.game-blocks .creds{
  position: fixed;
  bottom: 40px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.7em;
  color: var(--primary-color);
  margin:0;
  opacity: .45; 
}
.game-blocks .creds a{
  font-weight: bold;
}
.blockrain-game-holder {
  position: relative;
  padding: 0;
  margin: 0;
  color: var(--color-grey-1);
  font-size: 1em;
  line-height: 1.4em;
}
/* Touch Controls */
.blockrain-touch {
  position: absolute;
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 100%;
  border: 1px solid white;
  background: rgba(255,255,255,0.2);
  z-index: 10;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 50px;
  text-align: center;
}
.blockrain-touch:active {
  background: rgba(255,255,255,0.3);
}
.blockrain-touch-left {
  left: -60px;
  bottom: 10px;
}
.blockrain-touch-left::after {
  content: "<";
}
.blockrain-touch-right {
  right: -60px;
  bottom: 10px;
}
.blockrain-touch-right::after {
  content: ">";
}
.blockrain-touch-rotate-left {
  left: -60px;
  bottom: 80px;
}
.blockrain-touch-rotate-left::after {
  content: "<o";
}
.blockrain-touch-rotate-right {
  right: -60px;
  bottom: 80px;
}
.blockrain-touch-rotate-right::after {
  content: "o>";
}
.blockrain-touch-drop {
  left: 50%;
  margin-left: -25px;
  bottom: -60px;
}
.blockrain-touch-drop::after {
  content: ".";
}
/* Buttons */
.blockrain-btn {
  position: relative;
  display: inline-block;
  background: none;
  color: var(--primary-color);
  font-family: var(--font-family-2);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1.4em;
  font-weight: 100;
  letter-spacing: 3px;
  text-align: center;
  cursor: url('../images/cursor-pointer.svg'), auto;
  transition: none;
}
.blockrain-game-over-btn,
.blockrain-start-btn{
  font-size: 4em;
  transition: none;
}

.blocks-bt{
  cursor: url('../images/cursor-pointer.svg'), auto;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 5px 10px;
  font-size: 1em;
  line-height: 1.4em;
  font-family: "VCR";
  text-transform: uppercase;
  margin:0;
  transition: none;
}
.control-panel .blocks-bt{
  margin: 0;
  opacity: .35;
  pointer-events:none;
}
.control-panel .blocks-sound-bt{
  padding: 10px 3px 10px 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 0;
}
.sound-on .control-panel .blocks-sound-bt{
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.game-blocks-started .control-panel .blocks-bt{
  opacity: 1;
  pointer-events:auto;
}
.blocks-bt.to-home{
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
.blocks-bt span{
  display: inline-block;
}
.blocks-bt .icon{
  margin-right: 10px;
  font-weight: bold;
}
.blocks-bt:hover,
.game-paused .blocks-bt.pause{
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}
/* Score */
.blockrain-score-holder {
  position: absolute;
  top: 5px;
  right: 10px;
  text-align: right;
}
.blockrain-score{
  display: flex;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
  font-family: var(--font-family-2);
  text-transform: uppercase;
}
.blockrain-score-msg {
  line-height: 100%;
  margin-bottom: 3px;
}
.blockrain-score-num {
  font-size: 1em;
}
/* Menu */
.blockrain-start-holder, 
.blockrain-game-over-holder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
.blockrain-start, .blockrain-game-over, .paused-msg  {
  position: absolute;
  top: 50%;
  width: 100%;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}
.blockrain-start-msg, .blockrain-game-over-msg, .paused-msg {
  font-family: "VCR";
  font-size: 1em;
  text-transform: uppercase;
  margin-bottom: 25px;
  animation: blink 1.5s steps(2, start) infinite;
  -webkit-animation: blink 1.5s steps(2, start) infinite;
}
@keyframes blink 
{
  to 
  { 
      visibility: hidden; 
  }
}
.paused-msg{
  display: none;
  pointer-events:none;
  left: 0;
  text-align: center;
}
.game-paused .paused-msg{
  display: inline-block;
}
/* Line effects */
.shake-1,
.shake-2,
.shake-3,
.shake-4{
  display: inline-block;
  -ms-transform-origin: center center;
      transform-origin: center center;
  animation-name: shake-base;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
/*
.shake-2{
  display: inline-block;
  transform-origin: center center;
  animation-name: shake-hard;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake-3{
  display: inline-block;
  transform-origin: center center;
  animation-name: shake-opacity;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.shake-4{
  display: inline-block;
  transform-origin: center center;
  animation-name: shake-crazy;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
*/
@keyframes shake-base {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  2% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }
  4% {
    transform: translate(1.5px, 2.5px) rotate(-0.5deg);
  }
  6% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg);
  }
  8% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg);
  }
  10% {
    transform: translate(-0.5px, 1.5px) rotate(1.5deg);
  }
  12% {
    transform: translate(-0.5px, 2.5px) rotate(1.5deg);
  }
  14% {
    transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
  }
  16% {
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
  }
  18% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }
  20% {
    transform: translate(0.5px, -1.5px) rotate(-0.5deg);
  }
  22% {
    transform: translate(1.5px, 2.5px) rotate(1.5deg);
  }
  24% {
    transform: translate(-1.5px, 0.5px) rotate(1.5deg);
  }
  26% {
    transform: translate(2.5px, -0.5px) rotate(-0.5deg);
  }
  28% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg);
  }
  30% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }
  32% {
    transform: translate(-0.5px, 0.5px) rotate(1.5deg);
  }
  34% {
    transform: translate(-1.5px, -1.5px) rotate(0.5deg);
  }
  36% {
    transform: translate(-1.5px, -0.5px) rotate(1.5deg);
  }
  38% {
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
  }
  40% {
    transform: translate(2.5px, -1.5px) rotate(0.5deg);
  }
  42% {
    transform: translate(-1.5px, -0.5px) rotate(0.5deg);
  }
  44% {
    transform: translate(0.5px, 2.5px) rotate(0.5deg);
  }
  46% {
    transform: translate(-1.5px, 2.5px) rotate(0.5deg);
  }
  48% {
    transform: translate(0.5px, 1.5px) rotate(0.5deg);
  }
  50% {
    transform: translate(2.5px, 1.5px) rotate(0.5deg);
  }
  52% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg);
  }
  54% {
    transform: translate(-1.5px, 2.5px) rotate(-0.5deg);
  }
  56% {
    transform: translate(1.5px, -0.5px) rotate(1.5deg);
  }
  58% {
    transform: translate(0.5px, 0.5px) rotate(1.5deg);
  }
  60% {
    transform: translate(-1.5px, 0.5px) rotate(0.5deg);
  }
  62% {
    transform: translate(0.5px, 2.5px) rotate(1.5deg);
  }
  64% {
    transform: translate(2.5px, 2.5px) rotate(1.5deg);
  }
  66% {
    transform: translate(2.5px, 0.5px) rotate(0.5deg);
  }
  68% {
    transform: translate(2.5px, 2.5px) rotate(-0.5deg);
  }
  70% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg);
  }
  72% {
    transform: translate(-0.5px, 2.5px) rotate(0.5deg);
  }
  74% {
    transform: translate(2.5px, -0.5px) rotate(1.5deg);
  }
  76% {
    transform: translate(2.5px, -1.5px) rotate(0.5deg);
  }
  78% {
    transform: translate(1.5px, -0.5px) rotate(0.5deg);
  }
  80% {
    transform: translate(1.5px, 1.5px) rotate(-0.5deg);
  }
  82% {
    transform: translate(-1.5px, 2.5px) rotate(-0.5deg);
  }
  84% {
    transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
  }
  86% {
    transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
  }
  88% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }
  90% {
    transform: translate(1.5px, -0.5px) rotate(1.5deg);
  }
  92% {
    transform: translate(1.5px, -0.5px) rotate(-0.5deg);
  }
  94% {
    transform: translate(0.5px, 1.5px) rotate(-0.5deg);
  }
  96% {
    transform: translate(0.5px, 2.5px) rotate(1.5deg);
  }
  98% {
    transform: translate(0.5px, 1.5px) rotate(1.5deg);
  }
}
@keyframes shake-hard {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  2% {
    transform: translate(4px, 6px) rotate(-2.5deg);
  }
  4% {
    transform: translate(6px, -6px) rotate(3.5deg);
  }
  6% {
    transform: translate(8px, 7px) rotate(2.5deg);
  }
  8% {
    transform: translate(10px, 2px) rotate(-0.5deg);
  }
  10% {
    transform: translate(-1px, -3px) rotate(0.5deg);
  }
  12% {
    transform: translate(-7px, -7px) rotate(0.5deg);
  }
  14% {
    transform: translate(2px, 1px) rotate(-2.5deg);
  }
  16% {
    transform: translate(1px, 10px) rotate(2.5deg);
  }
  18% {
    transform: translate(-2px, -7px) rotate(1.5deg);
  }
  20% {
    transform: translate(6px, 5px) rotate(0.5deg);
  }
  22% {
    transform: translate(-1px, -3px) rotate(-2.5deg);
  }
  24% {
    transform: translate(0px, -4px) rotate(3.5deg);
  }
  26% {
    transform: translate(-9px, 1px) rotate(-0.5deg);
  }
  28% {
    transform: translate(7px, -4px) rotate(0.5deg);
  }
  30% {
    transform: translate(2px, -9px) rotate(0.5deg);
  }
  32% {
    transform: translate(5px, -4px) rotate(2.5deg);
  }
  34% {
    transform: translate(10px, -8px) rotate(0.5deg);
  }
  36% {
    transform: translate(6px, -1px) rotate(2.5deg);
  }
  38% {
    transform: translate(7px, 4px) rotate(-2.5deg);
  }
  40% {
    transform: translate(-7px, -3px) rotate(0.5deg);
  }
  42% {
    transform: translate(2px, -1px) rotate(-2.5deg);
  }
  44% {
    transform: translate(-9px, 5px) rotate(-0.5deg);
  }
  46% {
    transform: translate(1px, 10px) rotate(3.5deg);
  }
  48% {
    transform: translate(-1px, 7px) rotate(1.5deg);
  }
  50% {
    transform: translate(-2px, 0px) rotate(3.5deg);
  }
  52% {
    transform: translate(-6px, -2px) rotate(1.5deg);
  }
  54% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }
  56% {
    transform: translate(6px, 8px) rotate(-0.5deg);
  }
  58% {
    transform: translate(10px, 0px) rotate(2.5deg);
  }
  60% {
    transform: translate(2px, 2px) rotate(0.5deg);
  }
  62% {
    transform: translate(-2px, 9px) rotate(-1.5deg);
  }
  64% {
    transform: translate(6px, 10px) rotate(-0.5deg);
  }
  66% {
    transform: translate(-1px, -6px) rotate(1.5deg);
  }
  68% {
    transform: translate(-4px, 10px) rotate(1.5deg);
  }
  70% {
    transform: translate(3px, -9px) rotate(0.5deg);
  }
  72% {
    transform: translate(-7px, -4px) rotate(3.5deg);
  }
  74% {
    transform: translate(1px, -9px) rotate(0.5deg);
  }
  76% {
    transform: translate(-2px, -1px) rotate(1.5deg);
  }
  78% {
    transform: translate(6px, 6px) rotate(0.5deg);
  }
  80% {
    transform: translate(7px, 6px) rotate(-0.5deg);
  }
  82% {
    transform: translate(10px, -4px) rotate(-1.5deg);
  }
  84% {
    transform: translate(-8px, -2px) rotate(1.5deg);
  }
  86% {
    transform: translate(-9px, 4px) rotate(-1.5deg);
  }
  88% {
    transform: translate(10px, 2px) rotate(-1.5deg);
  }
  90% {
    transform: translate(-6px, 3px) rotate(-1.5deg);
  }
  92% {
    transform: translate(-4px, 2px) rotate(-2.5deg);
  }
  94% {
    transform: translate(8px, 2px) rotate(2.5deg);
  }
  96% {
    transform: translate(1px, -6px) rotate(2.5deg);
  }
  98% {
    transform: translate(-2px, -9px) rotate(-2.5deg);
  }
}
@keyframes shake-opacity {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 0.8;
  }
  10% {
    transform: translate(-4px, 4px) rotate(1.5deg);
    opacity: 0.6;
  }
  20% {
    transform: translate(3px, -4px) rotate(-0.5deg);
    opacity: 0.4;
  }
  30% {
    transform: translate(-1px, 2px) rotate(-0.5deg);
    opacity: 0.6;
  }
  40% {
    transform: translate(1px, 0px) rotate(1.5deg);
    opacity: 0.9;
  }
  50% {
    transform: translate(-2px, -2px) rotate(1.5deg);
    opacity: 1;
  }
  60% {
    transform: translate(-3px, -3px) rotate(2.5deg);
    opacity: 0.3;
  }
  70% {
    transform: translate(-1px, 1px) rotate(2.5deg);
    opacity: 0.5;
  }
  80% {
    transform: translate(-1px, 3px) rotate(-0.5deg);
    opacity: 0.1;
  }
  90% {
    transform: translate(0px, 1px) rotate(0.5deg);
    opacity: 0.5;
  }
}
@keyframes shake-crazy {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 0.7;
  }
  10% {
    transform: translate(-14px, -18px) rotate(5deg);
    opacity: 0.1;
  }
  20% {
    transform: translate(-11px, 7px) rotate(6deg);
    opacity: 0.6;
  }
  30% {
    transform: translate(8px, -9px) rotate(3deg);
    opacity: 1;
  }
  40% {
    transform: translate(3px, 14px) rotate(10deg);
    opacity: 0.1;
  }
  50% {
    transform: translate(-12px, 17px) rotate(1deg);
    opacity: 0.5;
  }
  60% {
    transform: translate(-4px, -10px) rotate(9deg);
    opacity: 0.3;
  }
  70% {
    transform: translate(-14px, -19px) rotate(9deg);
    opacity: 0.4;
  }
  80% {
    transform: translate(7px, 20px) rotate(7deg);
    opacity: 0.7;
  }
  90% {
    transform: translate(-12px, -17px) rotate(0deg);
    opacity: 0.7;
  }
}

/*********************
  MEDIA QUERIES
  *********************/

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

    .scroll-progress{
        width: calc(100% - 150px);
    }

    /* photo */
    .photos-item,
    .grid-sizer {
        width: 33.33%;
    }

}

@media only screen and (max-width: 1400px) {
    .main-header {
        position: static;
        width: 100%;
        height: 100px;
        border: 0;
        padding: 0;
        justify-content: space-between;
        transition: all .2s;
        z-index: 90;
        background-color: var(--bg-color-secondary);
        border-bottom: var(--default-border);
        flex-direction: row;
    }
    .main-header hgroup{
        width: auto;
        height: 100%;
        border-bottom: 0;
        height: 100%;
        display: flex;
        padding: 0;
        align-items: center;
        position: static;
    }
    .main-header hgroup a{
        flex-direction: row;
        align-items: center;
        height: 100%;
        width: auto;
    }

    .main-header h2 {
        height: 100%;
        width: 176px;
        padding-left: 30px;
        justify-content: center;
        margin-bottom: 0;
        text-shadow: none;
        font-size: 2em;
        border-right: var(--default-border);
    }
    .main-header h2 span{
        width: auto;
    }
    .home .main-header h2{
        display: flex;
    }

    /*
  .app-loaded .main-header hgroup:hover h2{
    text-shadow: 2px 2px 0 var(--secondary-color);
  }*/
    .main-header h1 {
        text-align: left;
        position: relative;
        margin-left: 0;
        margin-bottom: 0;
        height: 100%;
        font-size: .7em;
        color: #b8b8b8;
        line-height: 1.2;
        margin-left: 30px;
        display: flex;
        align-items: center;
    }

    .main-header .menu {
        width: auto;
        max-width: 100%;
        flex-direction: row;
        border-left: var(--default-border);
        padding: 0 30px;
        gap: 30px;
    }

    .main-header .menu p {
        text-align: right;
    }
    .main-header .menu .cab{
        display: none;
    }

    .main-header .menu a {
        margin: 0;
        border-left: 0 !important;
        font-size: 1.3em;
        width: auto;
    }

    .main-header .menu a .arw {
        display: none;
    }

    .main-header .contact {
        display: none;
    }

    .main-header .blocks-opener {
        display: none;
    }

    .menu a.play-blocks {
        display: none;
    }
    .credits-code{
        font-size: 2.6em;
        display: none;
    }

    .contact .blocks-opener {
        display: inline-block;
        color: #328bba;
        margin-top: 15px;
        pointer-events: auto;
        opacity: .9;
        font-size: 22px
    }

    .contact .blocks-opener:hover {
        color: var(--secondary-color);
    }

    .big-wrapper {
        margin-left: 0;
        width: 100%;
    }

    .info-section {
        border-left: 0;
        border-right: 0;
        margin: 0;
        padding-top: 0;
        border-bottom: var(--default-border);
    }
    .single .info-section{
        border-bottom: 0;
    }
    .project-list-but{
        top: 130px;
        right: 30px;
    }
    .project-list{
        border-left: 0;
        background-color: var(--bg-color-secondary);
    }
    .project-list>div{
        padding-top: 200px;
    }
    body.project-list-on{
        overflow: hidden;
    }

    .container,
    .container.full,
    .single .container {
        min-height: auto;
        width: 100%;
        margin-top: 0;
        border: 0;
    }

    .container.full {
        border-left: 0;
        border-right: 0;
        padding-bottom: 120px;
    }

    .single .container {
        padding-bottom: 0;
        padding-top: 80px;
    }

    .container:before {
        display: none;
    }

    .addings {
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        margin-bottom: 15px;
    }

    .photos-hg {
        border-left: 60px solid transparent;
        margin-top: 10px;
    }

    .photos-hg .desc {
        margin-bottom: 40px;
    }

    .go-to-top {
        left: 30px;
        bottom: 30px;
        left: auto;
    }

    .to-flickr.foo {
        bottom: 30px;
    }

    .to-flickr.foo p {
        width: 100%;
    }

    /* about */
    .to-email-form {
        display: none;
    }
    .to-work-bt {
        display: table;
        width: 100%;
    }
    .note{
        margin-top: 45px;
        height: auto;
    }
    .about-motto {
        margin: 30px 0 40px;
    }

    /* gallery */

    .mfp-bg {
        z-index: 9999;
    }

    .mfp-wrap {
        z-index: 99999;
        border-left: 0;
    }

    footer {
        display: inline-block;
        background-color: var(--bg-color-secondary);
        padding: 0;
    }
    footer .contact{
        height: 58px;
        padding: 0;
        border-bottom: 0;
    }


    .form-curtain {
        display: none;
    }


    /* go up arrow */

    .go-to-top {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2em;
        position: fixed;
        bottom: 0;
        left: 50%;
        width: 58px;
        height: 58px;
        margin-left: -29px;
        z-index: 80;
        opacity: 0;
        pointer-events: none;
        -ms-transform: scale(0) !important;
        transform: scale(0) !important;
        transition: none;
        background-color: var(--bg-color-secondary);
        border: var(--default-border);
        border-bottom: 0;
    }

    .exiting-to-project .go-to-top {
        opacity: 0 !important;
    }

    .app-loaded .go-to-top.on.scroll-up,
    .app-loaded.in-bottom .go-to-top {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1) translateZ(0) !important;
    }

    .go-to-top svg {
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        margin-bottom: 2px;
        height: 18px;
    }
    .go-to-top svg g{
        fill: #fff;
    }
    .scroll-progress{
        width: 100%;
    }
}

/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (max-width: 1280px) {

    .info-section,
    .container,
    .container.full {
        border-left: 0;
        border-right: 0;
    }

    .info-section {
        position: relative;
    }

    /*
  .about-item {
    margin: 0 auto 20px;
    padding-bottom: 15px;
  }*/
    .about-item figure {
        width: 45px;
    }

    .about-item .date {
        margin-bottom: 20px;
    }

    .photos-hg {
        border-left: 15px solid transparent;
    }

}

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

    .big-wrapper{
        margin-top: 70px;
    }

    /* cabecera */

    .main-header {
        flex-direction: column;
        border-bottom: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 70px;
        overflow: hidden;
        transition: none;
    }
    .main-header h1{
        margin-left: 20px;
    }
    .mob-menu-on .main-header h1{
        color: var(--color-grey-3);
    }
    .main-header h2{
        font-size: 1.6em;
        width: 136px;
        padding: 0 20px;
        color: var(--color-grey-3);
    }
    .mob-menu-on .main-header h2{
        color: var(--color-grey-3);
        border-right: var(--border-light-green);
    }
    .main-header h2 .dot2 {
        margin-left: -10px;
    }
    .mob-menu-on .main-header h2 .dot,
    .mob-menu-on .main-header h2 .dot2 {
        color: var(--color-grey-3);
    }

    .mob-menu-on .main-header,
    .main-header.scroll-up {
        position: fixed;
        z-index: 200;
    }

    .mob-menu-on .main-header {
        height: auto;
        overflow: hidden;
        background-color: var(--primary-color);
    }
    .mob-menu-on .main-header .menu a.active{
        text-decoration: line-through;
        opacity: .6;
    }
    .main-header hgroup{
        border-bottom: var(--default-border);
        height: 70px;
    }
    .mob-menu-on .main-header hgroup{
        border-bottom: var(--border-light-green);
    }

    /* cabecera - menu */

    .main-header .menu {
        margin-top: 0;
        padding: 0;
        width: auto;
        border: 0;
        flex-wrap: wrap;
        padding: 20px 0;
        gap: 10px 30px;
    }

    .main-header .menu a {
        margin: 0;
        float: left;
        /*border-right: 2px solid !important;
      border-bottom: 2px solid !important;*/
        border-left: 0 !important;
        color: var(--color-grey-3);
    }

    body.home .menu a.all,
    body.italia .menu a.italia,
    body.canarias .menu a.canarias,
    body.island .menu a.island,
    body.espana .menu a.espana,
    body.american-outdoors .menu a.american-outdoors,
    body.american-polis .menu a.american-polis{
        color: var(--color-grey-3);
        opacity: .4;
    }
    .main-header .contact{
        display: flex;
        border-top: var(--border-light-green);
        border-bottom: var(--border-light-green);
        height: 60px;
        justify-content: space-between;
        flex-direction: row;
        padding: 0 20px;
    }
    .contact a.mobile{
        display: flex;
        color: var(--color-grey-3);
        text-transform: lowercase;
        font-family: var(--font-family-1);
        font-size: 1.2em;
        letter-spacing: 0;
    }
    .contact a.mobile svg path{
        fill: var(--color-grey-3);
    }
    .contact a.side-form-bt{
        display: none;
    }

    /* cabecera - boton menu */

    .mob-nav-bt {
        width: 70px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        border-left: var(--default-border);
    }

    .mob-menu-on .mob-nav-bt{
        border-left: var(--border-light-green);
    }

    .mob-nav-bt .bars {
        width: 26px;
        height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .mob-nav-bt .bars span {
        width: 100%;
        height: 2px;
        background-color: var(--color-grey-1)
    }

    .mob-nav-bt .close-svg {
        display: none;
    }

    .mob-menu-on .mob-nav-bt .bars {
        display: none
    }

    .mob-menu-on .mob-nav-bt .close-svg {
        display: block;
    }
}

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

    .scroll-progress,
    .transition-block,
    .home-parallax-bg {
        display: none !important
    }
    .app-loaded .transition-cont {
        transition-delay: 0s;
    }
    .app-loaded.exiting .transition-cont {
        opacity: 0;
    }

    body{
        background-color: #222;
    }

    body.exiting {
        overflow: hidden;
    }

    body.home.exiting:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #222;
        opacity: .8;
        z-index: -1;
        transition: all .2s;
    }

    .menu a .bracket{
        display: none;
    }

    .menu a:hover {
        color: var(--color-grey-1);
        border-color: var(--color-grey-1);
    }

    .home .scanlines:before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


    /* interior */

    .info-section,
    .container,
    .container.full {
        border-left: 0 solid transparent;
        border-right: 0 solid transparent;
    }

    .opt-mossaic-big .project,
    .opt-mossaic-big .project.featured,
    .opt-mossaic-big.filtered .project.featured {
        width: calc(100%/2 - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }

    .opt-mossaic-big.filtered .project.featured figure,
    .opt-mossaic-big .project figure,
    .opt-mossaic-big .project.featured figure {
        min-height: 240px;
    }

    .opt-mossaic-big.filtered .project.featured figure,
    .opt-mossaic-big .project figure {
        opacity: 1;
    }
    .opt-mossaic-big .project.featured .title{
        font-size: 2em;
    }
    .project-list-but{
        top: 120px;
    }
    .project,
    .list-cab {
        width: 100%;
        margin: 0;
    }

    .list-cab p {
        padding: 10px 5% 30px;
    }

    .project .project-info {
        width: 100%;
        margin: 0;
        padding: 30px 5%;
    }

    .project .title,
    .project p {
        width: 50%;
    }

    .opt-list .project p{
        margin-top: 0;
    }

    .project p .date {
        text-align: right;
    }
    .project .line-arrow{
        display: none;
    }
    .project-content .content-item{
        margin-bottom: 120px;
    }
    .project-content:before {
        left: 50%;
    }

    .project .img-bg-fx{
        display: none;
    }

    /*
  .about-item .info{
    border-bottom: 1px solid #20455d;
  }*/
    .photos-item,
    .grid-sizer {
        width: 50%;
    }

    .single .container {
        border-left: 0;
        border-right: 0;
    }

    .project-content {
        border-left: 0;
        border-right: 0;
    }

    .project-content p {
        margin: 0 0 35px;
    }

    .project-content .content-item.width-75,
    .project-content .content-item.width-50,
    .project-content .content-item.width-66 {
        width: 100%
    }

    .project-content .content-item.width-33,
    .project-content .content-item.width-25 {
        width: 50%
    }

    .project-content .content-item .box {
        width: 100%
    }

    .hvr-ufl:after {
        display: none
    }
    .bg-big-text{
        display: none;
    }
    .project-nav{
        bottom: 0;
        justify-content: space-around;
    }
    .project-nav .thumb{
        display: none;
    }
    .project-nav a{
        margin: 0;
        word-spacing: 0;
    }
    .project-nav a .target{
        width: 100%;
        display: inline-block;
    }

    header .credits-code{
        display: none
    }
    footer .contact p{
        padding: 0 20px;
    }
}

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

    /* about*/

    .page-template-page-about .container{
        padding-top: 30px;
    }
    .single .container{
        padding-top: 60px;
    }
    .column,
    .page-template-page-about .info-section article {
        width: 100%;
    }
    .info-section {
        display: flex;
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .single .info-section article{
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }
    .info-section article .g2{
        margin: 0;
        width: 100%;
    }

    .to-cv-bt {
        margin: 30px 0 10px;
    }

}

/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (max-width: 768px) {


    .home.exiting .big-wrapper {
        opacity: 0;
    }

    .curtain {
        display: none;
    }

    /***************************************************/

    .glitch:after,
    .glitch:before {
        animation: none;
    }

    .app-loaded .home-header>div {
        margin-bottom: 20%;
    }

    .main-header .menu {
        padding: 20px;
        flex-direction: column;
    }
    .main-header .menu a{
        font-size: 2em;
    }

    /* interior */

    .photo-container{
        padding-bottom: 40px;
    }

    .grid-opts.photo {
        display: none
    }

    .project-nav {
        display: none
    }

    .project-nav-mob {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
    }

    .project-nav-mob.on.scroll-up,
    body.in-bottom .project-nav-mob {
        z-index: 1;
        opacity: 1;
        pointer-events: auto;
    }

    /* footer */

    footer .contact {
        margin-bottom: 57px;
        border-bottom: var(--default-border);
    }
}

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


    .big-wrapper{
        padding-top: 0;
    }

    /* cabecera - contacto */

    .main-header .contact {
        height: 50px;
        opacity: 0;
        pointer-events: none;
        z-index: -1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }

    .main-header .contact a {
        float: right;
        margin: 0;
        padding: 6px 0
    }

    .mob-menu-on .main-header .contact {
        opacity: 1;
        pointer-events: auto;
        z-index: 0;
    }

    .contact a {
        font-size: 1.2em;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .contact a.device-email {
        display: block;
    }

    .menu a.play-blocks {
        display: none;
    }

    .contact a [class*=icon-] {
        float: left;
        font-size: 1.2em;
        line-height: 0.9em;
    }

    

    .info-section {
        margin: 115px 0 0;
    }

    .single .info-section {
        margin-bottom: 20px;
        background-color: transparent;
    }
    .motive-lines.info{
        display: none;
    }

    .info-section {
        margin: 90px 0 0;
    }

    /* interior */

    .project-list-but,
    .project-list{
        display: none;
    }

    .photos-hg .desc {
        margin-bottom: 30px;
    }
    .work-grid {
        margin-top: 15px;
    }

    .opt-mossaic-big .work-grid {
        margin-top: 0;
        margin-bottom: 50px
    }
    .addings{
        border-left: 0;
        border-right: 0;
    }
    .grid-opts{
        padding: 0 20px;
    }
    .filters p{
        gap: 10px;
    }

    .project .project-info {
        padding: 20px 2%;
    }

    .project .title {
        width: 50%;
    }

    .project .title span {
        width: 90%;
    }

    .project p {
        width: 50%;
    }

    .project p span {
        text-align: right;
        width: 60%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .opt-list .project p span{
        margin-bottom: 0;
    }

    .info-section .ante-cab {
        margin-bottom: -10px
    }

    .opt-mossaic-big .project p span {
        margin: 0
    }

    .project p .date {
        width: 20%;
        text-align: right;
    }

    .opt-mossaic-big .project .project-info .date {
        display: none
    }

    .opt-mossaic-big .project p {
        width: 100%;
        font-size: .9em
    }

    .project .arrow {
        display: none;
    }

    .photos-hg {
        margin-top: 0;
    }

    .photos-hg .desc p {
        width: 100%;
    }

    .photos-item {
        width: 100%;
    }
    .grid-sizer {
        width: 100%;
    }

    .opt-mossaic-big.filtered .project.featured figure,
    .opt-mossaic-big .project figure,
    .opt-mossaic-big .project.featured figure {
        min-height: 20vh;
    }

    .opt-mossaic-big .project,
    .opt-mossaic-big .project.featured,
    .opt-mossaic-big.filtered .project.featured {
        margin-bottom: 0
    }

    .opt-mossaic-big .project .proj-pixel,
    .opt-mossaic-big .project .proj-pixel-2 {
        display: none;
    }

    .opt-mossaic-big .project figure>span {
        opacity: 1
    }

    .project-content{
        padding: 0 15px;
    }
    .project-content .content-item.device-mobile .box {
        width: 188px;
        padding: 44px 8px;
        border-radius: 28px;
    }

    .project-content .content-item.device-mobile .device-detail {
        top: 10px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        border: 2px solid transparent;
    }

    .project-content .content-item.device-mobile .device-detail:after {
        display: none;
    }

    .project-content .content-item.device-mobile .box:before {
        top: 23px;
        width: 30px;
        height: 2px;
        border: 2px solid transparent;
    }

    .project-content .content-item.device-mobile .box:after {
        bottom: 9px;
        width: 22px;
        height: 22px;
        border: 2px solid transparent;
    }

    .project-content .content-item.device-mobile,
    .project-content .content-item.device-mobile-nuevo {
        width: calc(100%/2);
    }

}

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

    /* home */

    .finish-intro .home-header {
        top: 30px;
        margin-top: 0;
    }

    /* about */

    .about-motto {
        font-size: 2em;
    }
    .column {
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
    }
    .work-grid{
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }

}

/*LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
@media only screen and (max-width: 480px) {

    .big-wrapper {
        line-height: 1.5em;
    }

    .home .scanlines {
        display: none;
    }

    /* about */

    .column {
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 10px solid transparent;
        border-bottom: 0;
    }

    .about-item figure {
        max-width: 40px;
    }

    .info-section .contact {
        margin-bottom: 20px;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
    }

    .info-section .contact p a {
        width: 100%;
        margin: 7px 0;
    }


    /* home */

    .home-header h2 {
        font-size: 1em;
    }

    .home-header h2 .nombre {
        font-size: 1.2em;
    }

    .call-to-act a {
        font-size: 1.2em
    }

    .main-header .menu {
        top: 80px;
        gap: 10px;
    }
    .mob-nav-bt{
        width: 70px;
        height: 70px;
    }

    .info-section article .desc p,
    .photos-item.set-header .desc {
        line-height: 1.2em;
    }

    .filters>span {
        display: none;
    }

    .filters p {
        padding: 10px 0;
    }

    .filters p span {
        margin: 0;
    }

    .filters p span:first-child {
        margin-left: 0;
    }

    .single .container {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        z-index: 100;
    }

    .project .project-info {
        padding: 10px 2%;
        border-bottom: 1px solid #323232;
    }

    .project-nav a {
        margin: 0 10px;
    }

    .photo-grid {
        border-right: 0;
        border-left: 10px;
    }

    .photos-item {
        border: 0;
        margin-bottom: 30px;
    }

    .to-project {
        margin-top: 15px;
    }
    footer .contact{
        flex-direction: column;
        height: auto;
        gap: 0;
    }
    footer .contact p{
        gap: 15px;
        height: 50px;
    }
    footer .contact a {
        margin: 0 15px;
    }
    footer .contact .credits{
        border-left: 0;
        border-top: var(--default-border);
        width: 100%;
        height: 70px;
        padding: 4px 0 0;
        font-size: 2em;
    }


    .single .container {
        padding-bottom: 20px;
        padding-top: 20px;
    }

    .go-to-top {
        left: 50%;
        -ms-transform: scale(0) translateX(-50%) !important;
        transform: scale(0) translateX(-50%) !important;
    }

    .mfp-container {
        padding: 0
    }

    .mfp-title {
        left: 10px;
    }
    .note span{
        display: inline-block;
        max-width: 280px;
    }

}

@media only screen and (max-width: 380px) {
    .home .contact a {
        margin: 5px 15px;
    }

    .call-to-act a {
        padding: 0;
    }

    .cab-section{
        font-size: 2.2em;
    }

    .addings{
        flex-direction: column;
        height: auto;
    }
    .grid-opts{
        height: 50px;
        order: 2;
        border-left: var(--default-border);
    }
    .filters{
        height: 50px;
        border-bottom: var(--default-border);
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .filters p{
        padding: 0;
        gap: 20px;
    }

    .opt-mossaic-big .project,
    .opt-mossaic-big .project.featured,
    .opt-mossaic-big.filtered .project.featured {
        margin-left: 10px;
        margin-right: 10px;
    }

    .opt-mossaic-big.filtered .project.featured figure,
    .opt-mossaic-big .project figure,
    .opt-mossaic-big .project.featured figure {
        min-height: 25vh;
    }
    .about-motto {
        font-size: 2em;
    }
}

@media only screen and (max-width: 320px) {
    .project-nav a {
        margin: 0 5px;
    }
}

/*********************
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*********************/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {}

/*********************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*********************/
@media print {
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }

    a,
    a:visited {
        color: var(--color-grey-2) !important;
        text-decoration: underline;
    }

    a:after,
    a:visited:after {
        content: " ("attr(href) ")";
    }

    a abbr[title]:after,
    a:visited abbr[title]:after {
        content: " ("attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    .sidebar,
    .page-navigation,
    .wp-prev-next,
    .respond-form,
    nav {
        display: none;
    }
}