@charset "utf-8";

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/manrope.woff2') format('woff2'),
        url('../fonts/manrope/manrope.woff') format('woff'),
        url('../fonts/manrope/manrope.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Socialico';
    src: url('../fonts/socialico/socialico.woff2') format('woff2'),
        url('../fonts/socialico/socialico.woff') format('woff'),
        url('../fonts/socialico/socialico.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Googlesans';
    src: url('../fonts/googlesans/googlesans.woff2') format('woff2'),
        url('../fonts/googlesans/googlesans.woff') format('woff'),
        url('../fonts/googlesans/googlesans.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*** DEFAULT RESET ***/
*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

@viewport {
    zoom: 1.0;
    width: device-width;
}

html {
    font-size: .8vh;
}

body {
    overflow-x: hidden;
    cursor: default;
    word-spacing: normal;
    color: #fff;
    margin: 0;
    background: no-repeat center right fixed, top left fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    font-family: 'Verdana', sans-serif;
    font-size: 1rem;

    /* NO SELECCIONA TEXTO EN MÓVILES CON CLIC DE USUARIO */
    -webkit-user-select: none;
    /* Safari 3.1+ */
    -moz-user-select: none;
    /* Firefox 2+ */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Standard syntax */

    /*** cursor ***/
    cursor: url(../index/cursor/cursor.png), auto; */
}

/* SELECCIÓN COLOR */
::-moz-selection {
    background: rgba(0, 188, 200, .48);
    color: white;
}

::selection {
    background: rgba(0, 0, 0, .77);
    color: white;
}

iframe {
    border: 0px;
    margin: 0px;
    padding: 0px;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
}

a:focus {
    color: inherit;
}

a:-webkit-any-link {
    text-decoration: none;
}

a:-moz-any-link {
    text-decoration: none;
}

a:any-link {
    text-decoration: none;
}

p {
    font-family: 'Googlesans';
}

.icono {
    text-decoration: none;
    font-family: WebSymbolsRegular;
    font-size: large;
    color: rgba(50, 50, 50, .3);
    display: inline-block;
    padding-right: 5px;
}

.icono:hover {
    text-decoration: none;
    font-family: 'Websymbols';
    color: #fff;
}

.tooltip {
    font-family: 'Googlesans', sans-serif;
    font-size: 1rem;
    z-index: 9999999;
}

.autoHeight {
    background: #fff;
    overflow: hidden;
}

/*** BARRAS DE DESPLAZAMIENTO ***/

*::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: #000;
    width: 5px;
}

*::-webkit-scrollbar {
    background-color: #f60;
    width: 5px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #fff;
    width: 5px;
}

/**********************************/
/*   BUBBLES THANkS TO MATCHBOXERO
/**********************************/

.burbujas {
    position: fixed;
    z-index: -111;
    width: 100%;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
    overflow: hidden;
}

.bubbles-container {
    position: absolute;
    background: transparent;
    bottom: 1px;
    right: 0%;
    width: 100%;
    max-width: 25rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 1;
    overflow: visible;
}

.bubbles {
    width: 100%;
    height: auto;
    opacity: .77;
}

.bubbles circle {
    stroke: white;
    fill: none;

}

.bubbles > g > g:nth-of-type(3n) circle {
    stroke: #87f5fb;
}

.bubbles > g > g:nth-of-type(4n) circle {
    stroke: #8be8cb;
}

.bubbles-large {
    overflow: visible;
}

.bubbles-large > g {
    -webkit-transform: translateY(2048px);
    transform: translateY(2048px);
    opacity: 0;
    will-change: transform, opacity;
}

.bubbles-large g:nth-of-type(1) {
    -webkit-animation: up 6.5s infinite;
    animation: up 6.5s infinite;
}

.bubbles-large g:nth-of-type(1) g {
    -webkit-transform: translateX(350px);
    transform: translateX(350px);
}

.bubbles-large g:nth-of-type(1) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
    animation: wobble 3s infinite ease-in-out;
}

.bubbles-large g:nth-of-type(2) {
    -webkit-animation: up 5.25s 250ms infinite;
    animation: up 5.25s 250ms infinite;
}

.bubbles-large g:nth-of-type(2) g {
    -webkit-transform: translateX(450px);
    transform: translateX(450px);
}

.bubbles-large g:nth-of-type(2) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
    animation: wobble 3s infinite ease-in-out;
}

.bubbles-large g:nth-of-type(3) {
    -webkit-animation: up 6s 750ms infinite;
    animation: up 6s 750ms infinite;
}

.bubbles-large g:nth-of-type(3) g {
    -webkit-transform: translateX(700px);
    transform: translateX(700px);
}

.bubbles-large g:nth-of-type(3) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
    animation: wobble 3s infinite ease-in-out;
}

.bubbles-large g:nth-of-type(4) {
    -webkit-animation: up 5.5s 1.5s infinite;
    animation: up 5.5s 1.5s infinite;
}

.bubbles-large g:nth-of-type(4) g {
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
}

.bubbles-large g:nth-of-type(4) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
    animation: wobble 3s infinite ease-in-out;
}

.bubbles-large g:nth-of-type(5) {
    -webkit-animation: up 6.5s 4s infinite;
    animation: up 6.5s 4s infinite;
}

.bubbles-large g:nth-of-type(5) g {
    -webkit-transform: translateX(675px);
    transform: translateX(675px);
}

.bubbles-large g:nth-of-type(5) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
    animation: wobble 3s infinite ease-in-out;
}

.bubbles-small {
    overflow: visible;
}

.bubbles-small > g {
    -webkit-transform: translateY(2048px);
    transform: translateY(2048px);
    opacity: 0;
    will-change: transform, opacity;
}

.bubbles-small g circle {
    -webkit-transform: scale(0);
    transform: scale(0);
}

.bubbles-small g:nth-of-type(1) {
    -webkit-animation: up 5.25s infinite;
    animation: up 5.25s infinite;
}

.bubbles-small g:nth-of-type(1) g {
    -webkit-transform: translateX(350px);
    transform: translateX(350px);
}

.bubbles-small g:nth-of-type(1) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
    animation: wobble 3s infinite ease-in-out;
}

.bubbles-small g:nth-of-type(2) {
    -webkit-animation: up 5.75s infinite;
    animation: up 5.75s infinite;
}

.bubbles-small g:nth-of-type(2) g {
    -webkit-transform: translateX(750px);
    transform: translateX(750px);
}

.bubbles-small g:nth-of-type(2) circle {
    -webkit-animation: wobble 3s infinite ease-in-out;
    animation: wobble 3s infinite ease-in-out;
}

.bubbles-small g:nth-of-type(3) {
    -webkit-animation: up 5.25s 250ms infinite;
    animation: up 5.25s 250ms infinite;
}

.bubbles-small g:nth-of-type(3) g {
    -webkit-transform: translateX(350px);
    transform: translateX(350px);
}

.bubbles-small g:nth-of-type(3) circle {
    -webkit-animation: wobble 3s 250ms infinite ease-in-out;
    animation: wobble 3s 250ms infinite ease-in-out;
}

.bubbles-small g:nth-of-type(4) {
    -webkit-animation: up 5.75s 325ms infinite;
    animation: up 5.75s 325ms infinite;
}

.bubbles-small g:nth-of-type(4) g {
    -webkit-transform: translateX(180px);
    transform: translateX(180px);
}

.bubbles-small g:nth-of-type(4) circle {
    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
    animation: wobble 3s 325ms infinite ease-in-out;
}

.bubbles-small g:nth-of-type(5) {
    -webkit-animation: up 6s 125ms infinite;
    animation: up 6s 125ms infinite;
}

.bubbles-small g:nth-of-type(5) g {
    -webkit-transform: translateX(350px);
    transform: translateX(350px);
}

.bubbles-small g:nth-of-type(5) circle {
    -webkit-animation: wobble 3s 250ms infinite ease-in-out;
    animation: wobble 3s 250ms infinite ease-in-out;
}

.bubbles-small g:nth-of-type(6) {
    -webkit-animation: up 5.13s 250ms infinite;
    animation: up 5.13s 250ms infinite;
}

.bubbles-small g:nth-of-type(6) g {
    -webkit-transform: translateX(650px);
    transform: translateX(650px);
}

.bubbles-small g:nth-of-type(6) circle {
    -webkit-animation: wobble 3s 125ms infinite ease-in-out;
    animation: wobble 3s 125ms infinite ease-in-out;
}

.bubbles-small g:nth-of-type(7) {
    -webkit-animation: up 6.25s 350ms infinite;
    animation: up 6.25s 350ms infinite;
}

.bubbles-small g:nth-of-type(7) g {
    -webkit-transform: translateX(480px);
    transform: translateX(480px);
}

.bubbles-small g:nth-of-type(7) circle {
    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
    animation: wobble 3s 325ms infinite ease-in-out;
}

.bubbles-small g:nth-of-type(8) {
    -webkit-animation: up 7s 200ms infinite;
    animation: up 7s 200ms infinite;
}

.bubbles-small g:nth-of-type(8) g {
    -webkit-transform: translateX(330px);
    transform: translateX(330px);
}

.bubbles-small g:nth-of-type(8) circle {
    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
    animation: wobble 3s 325ms infinite ease-in-out;
}

.bubbles-small g:nth-of-type(9) {
    -webkit-animation: up 6.25s 233ms infinite;
    animation: up 6.25s 233ms infinite;
}

.bubbles-small g:nth-of-type(9) g {
    -webkit-transform: translateX(230px);
    transform: translateX(230px);
}

.bubbles-small g:nth-of-type(9) circle {
    -webkit-animation: wobble 3s 275ms infinite ease-in-out;
    animation: wobble 3s 275ms infinite ease-in-out;
}

.bubbles-small g:nth-of-type(10) {
    -webkit-animation: up 6s 900ms infinite;
    animation: up 6s 900ms infinite;
}

.bubbles-small g:nth-of-type(10) g {
    -webkit-transform: translateX(730px);
    transform: translateX(730px);
}

.bubbles-small g:nth-of-type(10) circle {
    -webkit-animation: wobble 2s 905ms infinite ease-in-out;
    animation: wobble 2s 905ms infinite ease-in-out;
}

@-webkit-keyframes wobble {
    33% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }

    66% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
    }
}

@keyframes wobble {
    33% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }

    66% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
    }
}

@-webkit-keyframes up {
    0% {
        opacity: 0;
    }

    10%,
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-1024px);
        transform: translateY(-1024px);
    }
}

@keyframes up {
    0% {
        opacity: 0;
    }

    10%,
    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-1024px);
        transform: translateY(-1024px);
    }
}

/********  ANIMACIONES  ************/
/* animation: nombre1 1s, nombre2 3s forwards; */

/****** EFECTO SALTO LOGO DSG */

@keyframes salto {
    0% {
        transform: translateY(15px);
    }

    50% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(15px);
    }
}

/******  EFECTO REBOTE DE FOTO CIRCULAR */

@keyframes bouncing {
    0% {
        transform: translateY(0px);
        box-shadow: 0px 21px 25px rgba(0, 0, 0, 0.4);
    }

    50% {
        transform: translateY(10px);
        box-shadow: 0px 5px 26px rgba(0, 0, 0, 0.3);
    }

    100% {
        transform: translateY(0px);
        box-shadow: 0px 21px 25px rgba(0, 0, 0, 0.4);
    }
}

/****** EFECTO ENTRADA DERECHA ******/

.entradaderecha {
    animation: entradaderecha 0.5s forwards;
    animation-delay: 2s;
}

@keyframes entradaderecha {
    0% {
        transform: translateX(300px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/****** EFECTO ENTRADA FADEIN ABAJO/ARRIBA *****/

.efadein {
    opacity: 0;
    animation: .5s efadein forwards;
    animation-delay: .22s;
}

@keyframes efadein {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.efadein1 {
    opacity: 0;
    animation: .5s efadein forwards;
    animation-delay: .3s;
}

.efadein2 {
    opacity: 0;
    animation: .5s efadein forwards;
    animation-delay: .5s;
}

.efadein3 {
    opacity: 0;
    animation: .5s efadein forwards;
    animation-delay: .7s;
}

/******* COOKIES ********/

#cookies {
    position: fixed;
    z-index: 100;
    bottom: 1vh;
    left: 3vh;
    background: rgba(11, 11, 22, .94);
    width: ;
    -webkit-border-radius: 1rem;
    border-radius: .44rem;
    border: 1px solid #fff;
    text-align: right;
    padding: 1.5rem;
    padding-left: 12.5rem;
    padding-top: .5rem;
    font-family: 'Oswald light';
    color: #fff;
    box-shadow: 1px 10px 25px rgba(0, 0, 0, .5);
    opacity: 0;
    animation: showframecookies 1s ease 15s forwards;
}

@keyframes showframecookies {
    
    0% {
        transform: translateY(-77px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

#cookie {
    position: absolute;
    bottom: 0vh;
    left: -1vh;
    background: url(../index/cookies.png) left bottom no-repeat;
    background-size: contain;
    width: 15rem;
    height: 19rem;
    animation: salto 5s ease infinite;
}

c1 {
    font-size: 2.1rem;
    line-height: 3rem;
    font-variant-caps: all-petite-caps;    
}

c2 {
    font-size: 1.2rem;
    font-family: 'Rubik', 'Manrope', sans-serif;
}

#cbutton {
    position: absolute;
    z-index: 11;
    right: -9rem;
    bottom: 0rem;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    background: rgba(11, 11, 22, 0.88);
    -webkit-border-radius: 8px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0);
    text-align: center;
    line-height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .1s ease;
    -moz-transition: All .1s ease;
    -o-transition: All .1s ease;
    transition: All .1s ease;
}

#cbuttonx {
    position: absolute;
    z-index: 0;
    left: .4rem;
    top: 2.5rem;
    color: #fff;
    cursor: pointer;
    background: rgba(11, 11, 22, 0);
    padding: 4px;
    -webkit-border-radius: .5rem;
    border-radius: .5rem;
    border: 1px solid rgba(255, 255, 255, 0);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cbutton:hover, #cbuttonx:hover {
    text-shadow: 1px 1px 10px #fff;
    font-weight: 600;
    background: rgba(11, 11, 22, 0.94);
    border: 1px solid #fff;
}

/******** SOMBRAS ********/

.sombrasvg {
    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
}

.sombra {
    box-shadow: 4px 5px 15px rgba(0, 0, 0, 0.4);
}

.sombralateral {
    box-shadow: -5px 2px 8px rgba(0, 0, 0, .2);
}

.sombrasidebtn {
    box-shadow: 3px 2px 5px rgba(0, 0, 0, 0); */
}

.sombrabox {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
}

/*******  LATERALIN  *********/

#lateral {
    position: fixed;
    overflow: hidden;
    z-index: 1047483647;
    width: 100%;
    transform: translateX(100%);
    height: 100vh;
    right: 0;
    background: rgba(0,0,0, 1);
    display: block flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

#lateralin {
    position: fixed;
    overflow-y: auto;
    z-index: -1;
    width: 50vw;
    height: 100vh;
    right: 0;
    background: rgba(0, 0, 0, 1);
    overflow: hidden;
    color: #fff;
    box-shadow: -10px 10px 15px rgba(0, 0, 0, .2);
}

#lateralclose {
    position: absolute;
    z-index: 2;
    opacity: 1;
    cursor: pointer;
    width: 7rem;
    right: 46vw;
    top: 1vw;
    fill: #fff;
    padding: 10px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
    border-radius: 50%;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;

}

#lateralclose:hover {
    background: rgba(0, 0, 0, .15);
    transform: rotate(-180deg);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;
}

/******** MENU RAPIDO  *********/

#lateralmain {
    width: 100%;
    height: 100%;
    color: #000;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-size: 1.88rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 5rem;
    padding-left: 5%;
    padding-right: 5%;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

#lateralmain T {
    border-bottom: 1px solid #aaa;
    height: 7rem;
    padding-top: 8%;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: .5rem;
}

#lateralmain div {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    border: 0px solid #000;
    padding: 1.44rem;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 0.8s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
    transition: All 0.8s ease;
}

#lateralmain div:hover {
    padding-left: 12%;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.3s ease;
}

#lateralmain div:hover > on::before {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All .1s ease;
}

.on {
    cursor: pointer;
}

.on:hover {
    background: rgba(0,0,0, 1);
    color: white;
    border-radius: 2px;
}

.off {
    color: transparent;
    background: #555;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);

}

on::before {
    content: '♛  ';
    opacity: 0;
    padding-left: -1.44rem;
}

off::before {
    content: '♛ ';
    opacity: 0;
    padding-left: -1.44rem;
}

.footerside {
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 1rem;
}

.topcompartirside {
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    padding: 1rem;
    margin-left: .3em;
    background: transparent;
    color: #000;
    font-family: 'Socialicoplus', sans-serif;
    font-size: 3.3rem;
    line-height: .8em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .25s ease;
    -moz-transition: All .25s ease;
    -o-transition: All .25s ease;
    transition: All .25s ease;

}

.topcompartirside:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.1);
}

.topcompartirside:focus {
    color: #0fb;
}

#sidesocial {
    position: fixed;
    z-index: 1007483647;
    height: 91.0vh;
    width: 320px;
    text-align: center;
    background-color: #Fff;
    color: #000;
    top: 20px;
    left: -320px;
    box-shadow: 9px 10px 15px rgba(0, 0, 0, .1);

    /*ANIMACION SUAVE*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

#sidesocial:hover {
    /*TRANSFORM TRANSLATE*/
    -webkit-transform: translateX(320px);
    transform: translateX(320px);
    cursor: url(../index/cursor/cursor_white.png), auto;
    /*box-shadow: 4px 5px 15px rgba(0, 0, 0, 0.4);*/
    /*filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .1));*/
}

#sidesocialtooltip {
    position: fixed;
    z-index: 11;
    width: 50px;
    text-align: center;
    color: #000;
    top: 1.88rem;
    left: 0;
}

.sidesocialtooltipdiv {
    width: 100%;
    height: 4rem;
    border: 0px solid #000;
}

input {
    width: 100%;
    padding: 5px 10px;
    margin: 8px 0 10px 0;
    font-size: .8em;
    box-sizing: border-box;
    border: 2px dashed green;
    border-radius: 4px;
    cursor: pointer;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.hidemain:hover ~ #sidesocialmain #sbmain {
    opacity: 0;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .3s ease;
}

.hidepinterest:hover ~ #sidesocial #sbpinterest {
    opacity: 0;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .1s ease;
    -moz-transition: All .1s ease;
    -o-transition: All .1s ease;
    transition: All .1s ease;
}

.hidetwitter:hover ~ #sidesocial #sbtwitter {
    opacity: 0;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .3s ease;
}


/******** SIDESOCIAL SIDEBUTTON ********/

.sidebutton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 4rem;
    height: 4rem;
    right: -3.85rem;
    color: #fff;
    font-family: 'Socialico', sans-serif;
    font-size: 2.2em;
    line-height: 2.8rem;
    display: block;
    margin: 0;
    border-radius: 0px;
    padding: .5rem;
}

.sidebuttonM {
    position: absolute;
    top: 36vh;
    background-color: #0ff;
    color: #000;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.sidebuttonP {
    position: absolute;
    font-family: 'Socialico';
    top: 39vh;
    background-color: rgba(0, 0, 0, 1);
    opacity: 1;
    border-top-right-radius: 0.5vh;
    border-bottom-right-radius: 0.5vh;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.sidebuttonF {
    position: absolute;
    z-index: 1;
    font-family: 'Googlesans';
    font-size: 10pt;
    top: 22px;
    right: 33px;
    text-align: right;
    opacity: 1;
    color: #000;
    font-weight: bold;
    cursor: url(../index/cursor/cursor.png), auto;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.sidebuttonF:hover {
    color: #f00;
}

#sideclose {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 3rem;
    font-weight: 100;
    display: flex;
    justify-content: center;
    align-items: center;

}

#sandwich {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    background: #fff;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.sandwichrib {
    background: #000;
    height: 2px;
    margin: 2px;
}

#sidesocialmain {
    position: fixed;
    z-index: 1007483647;
    width: 340px;
    background-color: #fff;
    top: 20px;
    left: -340px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
    border-bottom: 3px solid #000;
    border-top: 0px solid #000;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    

    /*ANIMACION SUAVE*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

#sidesocialmain:hover {
    /*TRANSFORM TRANSLATE*/
    -webkit-transform: translateX(340px);
    transform: translateX(340px);
    /*box-shadow: 4px 5px 15px rgba(0, 0, 0, 0.4);*/
    /*filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .1));*/
}

#sidesocialmain:hover #sandwich {
    opacity: 0;
    z-index: 2;
    user-select: none;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .7s ease;
    -moz-transition: All .7s ease;
    -o-transition: All .7s ease;
    transition: All .7s ease;
}


/********* TWITTER ***********/

.wraptwitter {
    overflow-y: scroll;
    width: 100%;
    height: 98vh;
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 1rem;
}

.twitter-timeline {
    font-size: .5rem;
}

/******* WELCOME-BACKGROUND *******/

#welcomeback {
    position: fixed;
    overflow: hidden;
    visibility: hidden;
    z-index: 1147483648;
    background: rgba(0, 0, 0, .6);
    right: 0;
    width: 100%;
    height: 100vh;
    animation: showframeblack 12s ease forwards;
}

@keyframes showframeblack {
    0% {
        visibility: hidden;
        opacity: 0;
    }

    80% {
        visibility: hidden;
        opacity: 0;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}

#welcomebackintro {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Googlesans', sans-serif;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 2s ease;
    -moz-transition: All 2s ease;
    -o-transition: All 2s ease;
    transition: All 2s ease;
}

#welcomeblur {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/***** WELCOME POPUP *****/

#welcome {
    position: relative;
    overflow: hidden;
    z-index: 10;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .5);
    background: black;
    border-radius: 2%;
    display: flex;
    flex-flow: nowrap row;
    justify-content: center;
    align-items: center;
    width: 88vh;
}

#wbuttonclose {
    position: absolute;
    z-index: 100;
    opacity: 1;
    cursor: pointer;
    width: 5rem;
    right: .5vw;
    top: .5vw;
    fill: #fff;
    padding: 8px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));
    border-radius: 50%;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;
}

#wbuttonclose:hover {
    background: rgba(0, 0, 0, .15);
    transform: rotate(-90deg);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;
}

P1 {
    width: 70rem;
    color: #fff;
    border: 0px solid #fff;
    display: flex;
    flex-flow: nowrap column;
    justify-content: center;
    align-items: center;
    line-height: .5rem;
    padding-top: 8vh;
    padding-bottom: 9vh;
    padding-left: 8rem;
    padding-right: 8rem;
}
P1 h1,
P1 h2,
P1 h3 {
}

P1 h1 {
    font-family: 'Oswald light', sans-serif;
    font-size: 8rem;
    line-height: 7rem;
    font-weight: 888;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .22);
}

P1 h2 {
    line-height: 6rem;
    font-family: 'Oswald extralight', sans-serif;
    font-size: 3.8rem;
    text-shadow: -1px 1px 5px rgba(0, 0, 0, .55);
}

P1 h3 {
    font-family: 'Oswald extralight', sans-serif;
    font-size: 2.4rem;
    letter-spacing: .055rem;
    line-height: 4rem;
    background: rgba(0, 0, 0, .0);
    color: #fff;
    text-align: justify;
    text-shadow: 0 0 1px #000,
        1px 1px 3px rgba(0, 0, 0, 0.99);
    border-radius: 3px;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

P1 h3:hover {
    background: rgba(0, 0, 0, 0);
}

.P1enlace {
    text-decoration: underline;
}

.buttonsquare {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, .05);
    padding: 1rem;
    border: 2px solid #fff;
    font-family: 'Oswald extralight', sans-serif;
    font-size: 2.55rem;
    line-height: 4rem;
    cursor: pointer;
    margin-top: 7rem;
    padding-left: 5rem;
    padding-right: 5rem;
    font-weight: 600;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;
}

.buttonsquare bk {
    position: absolute;
    z-index: -1;
    background: rgba(255, 255, 255, 1);
    width: 110%;
    height: 0%;
    top: -5px;
    left: -5px;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .2s ease;
    -moz-transition: All .2s ease;
    -o-transition: All .2s ease;
    transition: All .2s ease;
}

.buttonsquare:hover {
    color: black;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .51s ease;
    -moz-transition: All .51s ease;
    -o-transition: All .51s ease;
    transition: All .51s ease;

}

.buttonsquare:hover bk {
    height: 110%;
}

#videointro {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
}

/*VIDEO*/
#videofondo {
    position: absolute;
    pointer-events: none;
    overflow: hidden;
    left: -35%;
    bottom: 0;
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scaleX(-1);
    filter: saturate(1.7);
    opacity: .88;
}

@media (min-aspect-ratio: 16/9) {
    #videofondo {
        right: 0;
        top: 0;
        min-width: 100vw;
        max-width: 100vw;
    }
}

@media (max-aspect-ratio: 16/9) {
    #videofondo {
        right: 0;
        top: 0;
        min-height: 100vh;
        max-height: 116vh;
    }
}

/******* OVERALL *******/

#overall {
    position: relative;
    overflow: hidden;
    z-index: 100;
    margin: 0;
    padding: 0;
    padding-right: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-family: 'Googlesans', sans-serif;
    background: #fff;
    opacity: 1;
    /*background: url(../index/104.jpg) no-repeat center right fixed, linear-gradient(#0099cc, #0099cc, #00bbcc) top left fixed;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 2s ease;
    -moz-transition: All 2s ease;
    -o-transition: All 2s ease;
    transition: All 2s ease;
}

#pinterpreview {
    position: absolute;
    visibility: hidden;
    background: #fff;
    width: 250px;
    height: 80vh;
    bottom: 10vh;
    left: 4vw;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    z-index: -10;
}

.pinterpreviewborder {
    position: absolute;
    visibility: hidden;
    background: #fff;
    width: 250px;
    height: 10px;
    left: 4vw;
    bottom: 4.7vw;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#dsglogo {
    position: absolute;
    z-index: -1;
    max-width: 35vh;
    min-width: 18vw;
    bottom: 41vh;
    transform: translateX(-10vh);
    animation: salto 5s ease infinite;
    pointer-events: none;
}

#loader {
    position: absolute;
    overflow: hidden;
    opacity: 1;
    bottom: 22vh;
    width: 20vh;
    background: #DDD;
    border-radius: 5px;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;
}

.loaderstrip {
    position: relative;
    left: 0px;
    top: 0;
    background: #000;
    width: 1vh;
    height: 2px;
    border-radius: 5px;
    animation: strip 2s infinite;
}

@keyframes strip {
    0% {
        width: 4vh;
        left: -2vh;
    }

    20% {
        width: 7vh;
    }

    50% {
        width: 4vh;
        left: 89%;
    }

    70% {
        width: 7vh;
    }

    100% {
        width: 4vh;
        left: -2vh;
    }
}

#loadercargando {
    position: absolute;
    opacity: 0;
    bottom: 24vh;
    width: 25vh;
    border-radius: 5px;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #000;
    font-weight: bolder;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1.2s ease;
    -moz-transition: All 1.2s ease;
    -o-transition: All 1.2s ease;
    transition: All 1.2s ease;
}

#loadercontinuar {
    position: absolute;
    opacity: 0;
    bottom: 4vh;
    width: 21vh;
    border-radius: 5px;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5rem;
    cursor: ;
    color: #000;
    
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

#flechabajo {
    position: absolute;
    visibility: visible;
    opacity: 1;
    bottom: 6vh;
    z-index: -99;
    /*animation: salto 4s ease infinite;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

/********* PORTADA **********/

#portada {
    position: relative;
    overflow: hidden;
    z-index: 0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100vh + 70px);
    background: url(../index/104.jpg) no-repeat right center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

#background {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    opacity: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

#mascara {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
    padding-left: 10.9vw;
    padding-bottom: 2.5vh;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

.showbackground:hover ~ #portada #background {
    opacity: 1;
    padding: 2vw;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 2.5s ease;
    -moz-transition: All 2.5s ease;
    -o-transition: All 2.5s ease;
    transition: All 2.5s ease;
}

.hidemascara:hover ~ #portada #mascara {
    opacity: 0;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .2s ease;
    -moz-transition: All .2s ease;
    -o-transition: All .2s ease;
    transition: All .2s ease;
}

/******** MEDELLIN **********/

#medellin {
    position: absolute;
    overflow: visible;
    padding: 1.8vh;
    z-index: 0;
    width: 100%;
    opacity: 1;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 1.1em;
    font-family: 'Googlesans', sans-serif;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0);
    padding-left: 7.7vw;
    padding-right: 7vw;
}

#medellin hr {
    background-color: #fff;
    border: 0px;
    height: .5px;
    width: 0%;
    margin: 0;
    margin-left: 0;
    margin-right: 1vh;
    opacity: 0;

    /*ANIMACION SUAVE*/
    transition-delay: 1s;
    -webkit-transition: All .8s ease;
    -moz-transition: All .8s ease;
    -o-transition: All .8s ease;
    transition: All .8s ease;
}

#dsgheader {
    opacity: 1;
    width: 17rem;
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);

    /*ANIMACION SUAVE*/
    -webkit-transition: All 11s ease;
    -moz-transition: All 11s ease;
    -o-transition: All 11s ease;
    transition: All 12.5s ease;
}

#medellin div {
    opacity: 0;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

#medellin div:nth-child(1) {
    width: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 0 1 auto;
}

#medellin div:nth-child(2) {
    opacity: 0;
    display: flex;
    flex-flow: row-reverse;
    justify-content: flex-start;
    align-items: center;
    flex: 1 0 auto;
    padding-right: 3rem;
}

#medellin div:nth-child(3) {
    opacity: 0;
    font-size: 1.1em;
    display: flex;
    flex-flow: row-reverse;
    justify-content: flex-start;
    align-items: center;
}

.showmedellin:hover > #medellin {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;
}

.showmedellin:hover > #medellin hr {
    opacity: 1;
    width: 88%;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
    transition-delay: .88s;
}

.showmedellin:hover > #medellin div:nth-child(1) {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
    transition-delay: .7s;
}

.showmedellin:hover > #medellin div:nth-child(2) {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
    transition-delay: .33s;
}

.showmedellin:hover > #medellin div:nth-child(3) {
    opacity: 0;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
    transition-delay: 0;
}

.showredes:hover > #compartirenredes {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

.showredes:hover > #fechatop {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

.showflechaback:hover > #flechaback {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

.topcompartir {
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    padding: 1rem;
    margin-left: .3em;
    background: transparent;
    color: #fff;
    font-family: 'Socialico', sans-serif;
    font-size: 2.5rem;
    line-height: .8em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;

}

.topcompartir:hover {
    background: rgba(0, 0, 0, 0.2);
}

#compartirenredes {
    position: absolute;
    z-index: 1;
    opacity: 0;
    top: 1vw;
    right: 8%;
    background: rgba(0, 0, 0, 0);
    width: 15rem;
    height: 4.3rem;
    display: flex;
    flex-direction: row;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

#fechatop {
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 1.33vw;
    right: 5.7%;
    background: rgba(0, 0, 0, 0);
    font-family: 'Rubik', sans-serif;
    font-size: 1.6rem;
    color: #fff;
    filter: drop-shadow(2px 1px 1px rgba(0, 0, 0, 1));

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

fechabottom {
    font-size: 1.2rem;
}

#flechaback {
    position: absolute;
    z-index: 1;
    opacity: 0;
    cursor: ;
    width: 4rem;
    right: 1.5vw;
    top: 2.3vh;
    fill: #fff;
    padding: 8px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1));

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;

}

/******** INTROTEXTO **********/

#introtitulo {
    z-index: 7;
    font-size: 2rem;
    padding-left: 28px;
    padding-top: 0px;
    padding-bottom: 17px;
    font-kerning: none;
    letter-spacing: .1px;
    font-stretch: condensed;
    font-family: 'Oswald light', 'Oswald', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    font-weight: lighter;
    
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.introtexto {
    z-index: 7;
    padding-left: 5rem;
    padding-right: 5rem;
    font-size: 5.5rem;
    line-height: 6.5rem;
    font-weight: bolder;
    letter-spacing: -1px;
    -webkit-letter-spacing: -1px;
    font-family: 'Oswald', sans-serif;
    background: rgba(55, 25, 255, .1);
    -webkit-background-clip: text;
    background-clip: text;
    cursor: url(../index/cursor/cursor.png), auto;

    /* SOMBRA TEXTO */
    filter: drop-shadow(1px 1px 1.5px rgba(0, 0, 0, .77));

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.introtexto hr {
    opacity: 1;
    border: none;
    float: right;
    /*   << Causa un Glitch al texto */
    width: 0.05%;
    height: 3px;
    background: linear-gradient(30deg, #0c9 14%, yellow 84%);
    margin: 0;
    border-radius: 5px;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.introtexto:hover {
    color: orange;
    background: linear-gradient(130deg, orange 24%, #0c9 88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateX(5rem);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .6s ease;
    -moz-transition: All .6s ease;
    -o-transition: All .6s ease;
    transition: All .6s ease;
}

.introtexto:hover hr {
    opacity: 1;
    width: calc(100%);
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

/********** TELONES ***********/

#telonweb {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background: rgba(255, 255, 255, 0) url(../index/lap.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All .8s ease;
}

#telonmotion {
    position: absolute;
    z-index: 3;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background: rgba(255, 255, 255, 0) url(../index/motion.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All .8s ease;
}

#telonUx {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background: rgba(255, 255, 255, 0) url(../index/ui.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All .8s ease;
}

#telon3D {
    position: absolute;
    z-index: 5;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background: rgba(255, 255, 255, 0) url(../index/pericles.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All .8s ease;
}

#telonBussi {
    position: absolute;
    z-index: 6;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background: rgba(255, 255, 255, 0) url(../index/business.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All .8s ease;
}

.descrip {
    position: absolute;
    z-index: 1;
    background: rgba(255, 255, 255, .88);
    width: 0;
    height: 0;
    top: 0%;
    right: 8%;
    color: transparent;
    font-family: 'Oswald light', sans-serif;
    font-size: 2.3rem;
    border: 0px solid #fff;
    text-align: justify;
    border-bottom-left-radius: 1%;
    border-bottom-right-radius: 1%;


    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.descrip::before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 4vw;
    top: 7vh;
    width: 0;
    height: 0;
    border-top: 0px solid #fff;
    border-left: 0px solid #fff;
    border-top-left-radius: 3px;
}

.descrip::after {
    content: ' ';
    position: absolute;
    z-index: 2;
    right: 4.5vw;
    bottom: 10vh;
    width: 0;
    height: 0;
    border-bottom: 0px solid #fff;
    border-right: 0px solid #fff;
    border-bottom-right-radius: 3px;
}

.descriptext {
    color: transparent;
    background: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0);
}

.descripcapital {
    position: absolute;
    visibility: hidden;
    top: 10vh;
    left: 6.5vw;
    font-family: 'Oswald', sans-serif;
    color: transparent;
    background: #000;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 2px 3px 3px rgba(200, 255, 255, 0.2);
    font-size: 7.2rem;
}

.rainbow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(135deg, #ffEB41 0%, #25FFE0 50%, #5500aa 100%);
}

.leitmotiv {
    position: absolute;
    overflow: hidden;
    left: -2.4vw;
    bottom: 1.8vw;
    width: 12.8vw;
    height: 12.8vw;
    border-radius: 8%;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.leitmotivideo {
    position: relative;
    z-index: 2;
    width: 0%;
}

@keyframes desglosecapital {
    0% {
        visibility: hidden;
        opacity: 0;
    }

    65% {
        visibility: visible;
        opacity: 0;
        top: 12.5vh;
    }

    100% {
        visibility: visible;
        opacity: 1;
        top: 11.5vh;
    }

}

@keyframes desglosetext {
    0% {
        color: transparent;
        background: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0);
    }

    65% {
        color: transparent;
        background: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0);
    }

    100% {
        color: transparent;
        background: #000;
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);

    }

}

@keyframes desglose {
    0% {
        height: 0%;
        width: 0;
    }

    30% {
        height: 0%;
        width: 35%;
        padding: 0vh;
    }

    65% {
        height: 68%;
        width: 35%;
        padding-left: 8vw;
        padding-right: 8vw;
        padding-top: 20vh;
    }

    100% {
        height: 68%;
        width: 35%;
        padding-left: 8vw;
        padding-right: 8vw;
        padding-top: 23vh;
    }
}

@keyframes desgloseleft {
    0% {
        height: 0;
        width: 0;
    }

    30% {
        height: 0;
        width: 0;
    }

    100% {
        height: 11vw;
        width: 15vw;
        border-top: 1.5px solid #000;
        border-left: 1.5px solid #000;
        border-top-left-radius: 2px;

    }
}

@keyframes desgloseright {
    0% {
        height: 0;
        width: 0;
    }

    30% {
        height: 0;
        width: 0;
    }

    100% {
        height: 17vw;
        width: 5vw;
        border-bottom: 1.5px solid #000;
        border-right: 1.5px solid #000;
        border-bottom-right-radius: 2px;

    }
}

@keyframes desgloseleitmotiv {
    0% {
        filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, .1));
    }

    55% {
        filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .3));
    }

    100% {
        filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .3));
    }
}

@keyframes desgloseleitmotivideo {
    0% {
        width: 0;
    }

    55% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

.overweb:hover ~ #telonweb {
    width: 100%;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overweb:hover ~ #telonweb .descrip {
    animation: desglose 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overweb:hover ~ #telonweb .descripcapital {
    animation: desglosecapital 1s forwards;
    animation-delay: .1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overweb:hover ~ #telonweb .descriptext {
    animation: desglosetext 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overweb:hover ~ #telonweb .leitmotiv {
    animation: desgloseleitmotiv .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overweb:hover ~ #telonweb .leitmotivideo {
    animation: desgloseleitmotivideo .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overweb:hover ~ #telonweb .descrip::after {
    animation: desgloseright 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overweb:hover ~ #telonweb .descrip::before {
    animation: desgloseleft 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overmotion:hover ~ #telonmotion {
    width: 100%;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overmotion:hover ~ #telonmotion .descrip {
    animation: desglose 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overmotion:hover ~ #telonmotion .descripcapital {
    animation: desglosecapital 1s forwards;
    animation-delay: .1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overmotion:hover ~ #telonmotion .descriptext {
    animation: desglosetext 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overmotion:hover ~ #telonmotion .leitmotiv {
    animation: desgloseleitmotiv .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overmotion:hover ~ #telonmotion .leitmotivideo {
    animation: desgloseleitmotivideo .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overmotion:hover ~ #telonmotion .descrip::after {
    animation: desgloseright 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overmotion:hover ~ #telonmotion .descrip::before {
    animation: desgloseleft 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overUx:hover ~ #telonUx {
    width: 100%;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overUx:hover ~ #telonUx .descrip {
    animation: desglose 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overUx:hover ~ #telonUx .descripcapital {
    animation: desglosecapital 1s forwards;
    animation-delay: .1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overUx:hover ~ #telonUx .descriptext {
    animation: desglosetext 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overUx:hover ~ #telonUx .leitmotiv {
    animation: desgloseleitmotiv .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overUx:hover ~ #telonUx .leitmotivideo {
    animation: desgloseleitmotivideo .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overUx:hover ~ #telonUx .descrip::after {
    animation: desgloseright 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overUx:hover ~ #telonUx .descrip::before {
    animation: desgloseleft 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.over3D:hover ~ #telon3D {
    width: 100%;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.over3D:hover ~ #telon3D .descrip {
    animation: desglose 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.over3D:hover ~ #telon3D .descripcapital {
    animation: desglosecapital 1s forwards;
    animation-delay: .1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.over3D:hover ~ #telon3D .descriptext {
    animation: desglosetext 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.over3D:hover ~ #telon3D .leitmotiv {
    animation: desgloseleitmotiv .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.over3D:hover ~ #telon3D .leitmotivideo {
    animation: desgloseleitmotivideo .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.over3D:hover ~ #telon3D .descrip::after {
    animation: desgloseright 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.over3D:hover ~ #telon3D .descrip::before {
    animation: desgloseleft 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overBussi:hover ~ #telonBussi {
    width: 100%;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overBussi:hover ~ #telonBussi .descrip {
    animation: desglose 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overBussi:hover ~ #telonBussi .descripcapital {
    animation: desglosecapital 1s forwards;
    animation-delay: .1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overBussi:hover ~ #telonBussi .descriptext {
    animation: desglosetext 1s forwards;
    animation-delay: .2s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overBussi:hover ~ #telonBussi .leitmotiv {
    animation: desgloseleitmotiv .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overBussi:hover ~ #telonBussi .leitmotivideo {
    animation: desgloseleitmotivideo .5s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overBussi:hover ~ #telonBussi .descrip::after {
    animation: desgloseright 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.overBussi:hover ~ #telonBussi .descrip::before {
    animation: desgloseleft 1s forwards;
    animation-delay: 1s;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

/************ SUPREME ***********/

#supreme {
    position: absolute;
    z-index: 0;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    right: 8.1vw;
    font-size: 1rem;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

wrap {
    opacity: 0;
    margin-bottom: 7vh;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .8);
    font-family: 'Oswald extralight', 'Oswald', sans-serif;
    font-size: 2.4em;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

#foto {
    display: block;
    opacity: 0;
    animation: bouncing 5s infinite ease;
    width: 25rem;
    height: 25rem;
    margin-top: 11vh;
    margin-bottom: 5vh;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    box-sizing: content-box;
    border: .0vh solid rgba(255, 255, 255, 0.2);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

#foto::before {
    content: ' ';
    position: absolute;
    width: 25rem;
    height: 25rem;
    margin-top: 0vh;
    margin-left: 0vh;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    box-sizing: content-box;
    background: url(../_fotorapida2.jpg) no-repeat left center, #725655;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

cel {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    font-family: 'Bebasneue Book', 'Oswald';
    letter-spacing: 0px;
    font-weight: 600;
}

cajapro {
    position: relative;
    overflow: hidden;
    margin-bottom: calc(4vh + 88px);
    text-align: center;
    color: #fff;
    font-family: 'Verdana', 'Googlesans', sans-serif;
    font-size: 1.1rem;
    padding: 9px 21px 21px 22px;
    -webkit-border-radius: 20px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .0);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    background: rgba(0, 0, 0, 0.0);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;

}

cajapro:hover {
    /*cursor: url(../index/cursor/cursor.png), auto;*/
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 1);
    -webkit-border-radius: 2px;
    border-radius: 8px;
}

profesion {
    font-family: 'Oswald light', 'Verdana', 'Google Sans';
    font-size: 1.88rem;
    line-height: 3em;
}

cajapro a {
    font-family: inherit;
    font-size: inherit;
}

#fondocajapro {
    position: absolute;
    z-index: -10;
    top: 60%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: rgba(11, 11, 22, 0.4);
    border-radius: 50%;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All .5s ease;
}

.overfondocajapro:hover > #fondocajapro {
    transform: scale(333);
    opacity: 1;
    transition-delay: 0;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All .5s ease;
}

.showsupremewrap:hover ~ wrap {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
    transition-delay: .1s;
}

.showsupremewrap:hover ~ #foto {
    opacity: 1;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
    transition-delay: .22s;
}

.hidesupreme:hover ~ #supreme {
    opacity: 0;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.hidemascara:hover ~ #mascara {
    opacity: 0;
    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

.changecolortitulo:hover ~ #introtitulo {
    color: #333333;
}

/************ PORTAFOLIO ***************/

#SKY {
    position: absolute;
    top: -4vw;
}

.minifader {
    height: .2vh;
    background: #22FFB4;
    /*background: linear-gradient(135deg, #FF6F81 0%, #25FFE0 50%, #FFEB41 100%);*/
    background: linear-gradient(135deg, #FFEB41 0%, #25FFE0 50%, #FFEB41 100%);
}

#MAINBARS {
    position: relative;
    background-color: rgba(0, 0, 0, .25);
    border: 0px solid #fff;
    padding: 0;
}

#BARS {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1vh;
    padding-top: .5vh;
}

#MINILOGO {
    width: 20vw;
    font-size: 3.2rem;
    color: #fff;
    background: rgba(0, 0, 0, .0);
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}

.MENUS {
    background: rgba(0, 0, 255, .0);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#MINIBARRAS {
    width: 20vw;
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: 'Oswald';
    font-size: 3.2rem;
    color: #fff;
    background: rgba(0, 0, 0, .0);
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}

.barras {
    position: relative;
    z-index: 2;
    width: 33px;
    height: 30px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    transform: translate(20px);
    cursor: pointer;
}

.barrasrib {
    background: #fff;
    height: 2.5px;
    margin: 2.5px;
}

/************ PORTFOLIO ****************/

.portfolio {
    position: relative;
    top: -88px;
    max-width: 84vw;
    min-width: 365px;
}

/************** WIDERS ***************/

.widers {
    max-width: 90vh;
    min-width: 400px;

}

.widers_wide {
    min-width: 82vw;
}

/******** PROYECTOS DESTACADOS *********/

.pendientes,
.websites,
.anotacion,
.motions,
.verdementa,
.petshop,
.cosmica,
.xperience,
.aqui {
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.separador {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 20vh;
    margin-bottom: 4vh;
    border-bottom: 1px dashed rgba(255,255,255, .55);
}

.separadorh {
    display: block;
    grid-column: span 5;
    height: 55px;
}

.maxtit {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1p solid #fff;
}

.maxtitulo {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    margin-top: 10vh;
    margin-left: -2vw;
    margin-bottom: 0vh;
    top: 12vh;
    font-size: 3.6rem;
    font-weight: bold;
    font-family: 'Oswald light', sans-serif;
    color: #fff;
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
}

.maxtitulo2 {
    position: relative;
    z-index: 1;
    top: -10rem;
    margin: 0;
    margin-top: 1.2em;
    font-size: 1.8em;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;

    /* SOMBRA TEXTO */
    color: rgba(255, 255, 255, .55);
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
}

.subraya {
    animation: subraya .5s linear infinite;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
}

@keyframes subraya {
    0% {
        color: white;
    }

    77% {
        color: transparent;
    }

    100% {
        color: white;
    }
}

titulo {
    display: flex;
    font-family: 'Bebasneue', 'Fjalla one', 'Oswald', sans-serif;
    font-weight: 444;
    font-size: 5rem;
    line-height: 1.2em;
    color: #fff;
    padding-top: 5rem;
    padding-left: 1vw;
    padding-bottom: 1rem;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-top: 0px solid #fff;
    letter-spacing: 0px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    opacity: .75;
}

symbolo {
    position: absolute;
    opacity: 0.0;
    z-index: -1;
    top: 45px;
    left: -12vh;
    font-family: 'Websymbols';
    display: inline-block;
    vertical-align: baseline;
    font-size: 6rem;
    transform: skewX(-10deg) translateY(-3px);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .3));

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All 1s ease;
}

titulo div:hover ~ symbolo {
    transform: scale(1.2) skewX(-10deg) translateX(1px) translateY(-2px);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .4));
    opacity: 0;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .3s ease;
    -moz-transition: All .3s ease;
    -o-transition: All .3s ease;
    transition: All .3s ease;
}

titulo2 {
    display: block;
    font-family: 'Googlesans', sans-serif;
    font-size: 1.8em;
    color: #fff;
    padding-top: 1rem;
    padding-bottom: 10rem;
    padding-left: 1vw;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

titulo2 a {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1em;
    color: #fff;
    line-height: 2em;
}

tituloside {
    position: absolute;
    z-index: -10;
    left: -17vh;
    top: 30rem;
    background: rgba(0, 0, 0, 0);
    transform: rotate(-90deg);
}

textoside {
    position: absolute;
    z-index: -1;
    font-size: 7rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    right: 88px;
    top: 0px;
    text-align: right;
    color: rgba(255, 255, 255, .33);
}

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

.gradiente {
    background: #FFEB41;
    background: linear-gradient(135deg, #FFEB41 0%, #25FFE0 50%, #FF5F81 100%);
}

.gradiente2 {
    background: #FFB422;
    background: linear-gradient(235deg, #22FFB4 0%, #F2FF15 50%, #FF3341 100%);
}

.gradiente3 {
    background: #22FFB4;
    background: linear-gradient(235deg, #22FFB4 0%, #F2FF15 50%, #22FFB4 100%);
}

/******* FLOTANTES *********/

#floatisland {
    position: absolute;
    width: calc(28vh / 1.57);
    height: 33vh;
    z-index: 111px;
    top: 1vh;
    left: -25vh;
    animation: salto 4s ease infinite;
    background: url(../index/float_island.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: drop-shadow(2px 12px 10px rgba(0, 0, 0, 0.3));
    opacity: 1;
}

#gafasbuceo {
    position: absolute;
    z-index: -10;
    background: url(../index/gafasbuceo.png);
    background-size: cover;
    width: 24vh;
    height: 20vh;
    top: 3vh;
    left: -15vw;
    animation: 5s salto ease infinite;
    opacity: 1;
}

#sandia {
    position: absolute;
    z-index: -10;
    background: url(../index/gafasbuceo.png);
    background-size: cover;
    width: 22vh;
    height: 20vh;
    top: -109vh;
    left: -14vw;
    animation: 5s gafas ease infinite;
    opacity: 1;
}

#cocos {
    position: absolute;
    z-index: -10;
    background: url(../index/gafasbuceo.png);
    background-size: cover;
    width: 22vh;
    height: 20vh;
    top: -109vh;
    left: -14vw;
    animation: 5s gafas ease infinite;
    opacity: 1;
}

/**** EN DESARROLLO ****/

.pendientes {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-left: 1vw;
}

.pendiente {
    cursor: url(../index/cursor/cursor.png), auto;
    cursor: pointer;
    width: 88%;
    /* ojo */
    text-align: left;
    border-radius: 5px;
    color: #fff;
    font-size: 1.4rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));

    flex: 0 1 auto;
    padding: 1.5vw;
    margin: 1vh;
}

.pendiente:hover {
    transform: scale(1.04);
    box-shadow: 3px 10px 20px rgba(0, 0, 0, .3);


    /*ANIMACION SUAVE*/
    -webkit-transition: All .25s ease;
    -moz-transition: All .25s ease;
    -o-transition: All .25s ease;
    transition: All .25s ease;
}

.pendiente T {
    display: block;
    font-family: 'Oswald', serif;
    font-size: 2em;
    line-height: 2.2em;
    padding: 0;
}

.pendiente T::after {
    content: url('../index/arrowder.svg');
    background: rgba(0, 0, 0, 0);
    width: 3rem;
    position: relative;
    z-index: 2;
    float: right;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
}

.pendiente T::after:hover {
    width: 4rem;
}

.pendiente p {
    background: rgba(0, 0, 0, 0);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    filter: drop-shadow(1px 1px 8px rgba(0, 0, 0, .22));
}

.pendiente s {
    text-decoration: none;
    font-size: 1.4em;
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    cursor: pointer;
}

.pendiente o {
    font-family: 'Oswald light', sans-serif;
    font-size: 1.4em;
}

.cosmica {
    background: url(../index/cosmica.jpg) #000;
    background-position: top right;
    background-size: cover;
    align-self: flex-start;
}

.verdementa {
    background: url(../index/verdementa.jpg) #F69;
    background-position: top right;
    background-size: cover;
    align-self: flex-start;
}

.petshop {
    background: url(../index/petshop.jpg) #5AE0B0;
    background-position: top right;
    background-size: cover;
    align-self: flex-start;
}

.xperience {
    background: url(../index/xperience.jpg) #222;
    background-position: top right;
    background-size: cover;
    align-self: flex-start;
}

/**** MOTION DESIGN ****/

.motions {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    grid-gap: 2vh;
    padding-left: 1vw;
    padding-right: 1vw;    
}

.videomotion {
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, .5));

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.videomotion:hover {
    z-index: 2;
    transform: scale(1.4) rotateX(0deg) rotateY(0deg) rotateZ(-20deg) translateX(-0.5vw) translateY(-1vw) translateZ(2.2vw) skewX(-10deg) skewY(10deg);
    box-shadow: 12px 12px 30px rgba(0, 0, 0, .33);
    border-radius: 8px;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.videomotion img {
    /*will-change: auto;*/
    position: relative;
    z-index: -1;
    width: 120%;
    object-fit: cover;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.videomotion:hover img {
    object-position: right;
    -webkit-filter: saturate(2);
    filter: saturate(2);
    transform: scale(1.2);
    pointer-events: none;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.aqui {
    border: 0px solid #fff;
    line-height: 4rem;
    padding: .3rem 1.2rem .7rem 1.2rem;
    border-radius: 6px;
}

.aqui:hover {
    background: rgba(255, 255, 255, 1);
    color: transparent;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .3s ease;
}

/****** WEBS UI *******/

.websitesui {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    grid-gap: 2vh;
    padding-left: 1vw;
    padding-right: 1vw;    
}

.webui {
    overflow: hidden;
    border-radius: 2px;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, .5));

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.webui img {
    position: relative;
    z-index: -1;
    width: 100%;
    object-fit: cover;
}

.webui:hover {
    z-index: 2;
    transform: scale(1.4) rotateX(0deg) rotateY(0deg) rotateZ(-20deg) translateX(0vw) translateY(-1.2vw) translateZ(2.2vw) skewX(-10deg) skewY(10deg);
    z-index: 3;
    box-shadow: 12px 12px 30px rgba(0, 0, 0, .33);
}

/****** ANOTACION ******/

.anotacion {
    display: grid;
    grid-template-columns: 5fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 5rem;
    background: #fff;
    color: #000;
    border-radius: 7px;
    padding: 6rem;
    margin-top: 5vh;
}

.anotacion div {
    display: flex;
    background: rgba(0, 0, 200, 0);
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

    color: #000;
    font-size: 1.9rem;
    text-align: justify;
    font-family: 'Oswald', 'Googlesans', sans-serif;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
}

.anotacion hazclic {
    flex: 1 0 auto;
    background: #fff;
    border-radius: 5px;
    padding: 2rem;
    cursor: pointer;
    color: black;
    font-family: 'Oswald', sans-serif;
    font-size: 1.7rem;
    border: 2px solid #000;
    text-align: center;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.anotacion hazclic:hover {
    background: black;
    color: #fff;
    border: 2px solid #fff;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .2s ease;
}

/***** INSTALACIONES GRAFICAS *****/

.instalaciones {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: row;
    grid-gap: 3vh;
}

.instal {
    overflow: hidden;
    border-radius: 2px;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.instal img {
    position: relative;
    z-index: 1;
    width: 100%;
    object-fit: cover;
}

.instal:hover {
    z-index: 2;
    transform: scaleX(1.6) scaleY(1.6) scaleZ(1.6) rotateX(0deg) rotateY(0deg) rotateZ(-20deg) translateX(0vw) translateY(-1.2vw) translateZ(2.2vw) skewX(-10deg) skewY(10deg);
    z-index: 3;
    box-shadow: 12px 12px 30px rgba(0, 0, 0, .5);
}

.instal:hover img {
    z-index: -3;
}

/***** REALIDAD AUMENTADA ********/

.ramain {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 3rem;
    padding-left: 1vw;
    padding-right: 1vw;
}

.ravideo {
    position: relative;
    grid-column: 1 / 3;
}

.ravisor {
    padding: 1rem;
    width: 100%;
    height: 20vw;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

}

.visorover {
    position: absolute;
    z-index: 1;
    background: rgba(0, 0, 0, 0);
    width: 100%;
    height: 20vw;
    cursor: pointer;
}

.raumentada {
    grid-column: 3 / 6;
    margin: 0;
    padding: 2.2em;
    overflow: hidden;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 1.9rem;
    color: #000;
    line-height: 1.5em;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    background-color: rgba(255, 255, 255, .95);
}

.raumentada h1 {
    font-size: 2.4rem;
    line-height: 1.5em;
    text-align: center;
    padding-bottom: 3vh;
    margin: 0;

}

.verlink {
    font-family: 'Lobster', sans-serif;
    font-size: 3.3rem;
    color: transparent;
    background: #111;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 2px 1px 3px rgba(255, 255, 255, 0.8);
}

.verlink:hover {
    color: #333;
}

/*********** PALMS BEACH ***********/

.palmsbeach {
    position: relative;
    background: linear-gradient(0deg, #25FFE0 0%, #25FFE0 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 69.9vh;
    border: 0px solid black;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 15vh;
}

.beachplease {
    position: absolute;
    z-index: 11;
    width: 100%;
    margin-top: 28vh;
    padding-right: 15px;
    font-family: 'Montserrat', sans-serif;
    text-align: right;
    font-size: 1.5rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    border: 0px solid #fff;


}

.locacion {
    font-family: 'Websymbols', sans-serif;
    font-size: 4rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.palms {
    position: relative;
    z-index: 10;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url(../index/palmsbeach.png) no-repeat left bottom;
    background-size: cover;
}

#redcrab {
    position: absolute;
    width: 40vh;
    height: 25vh;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    bottom: -15vh;
    left: 1vw;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1s ease;
    -moz-transition: All 1s ease;
    -o-transition: All 1s ease;
    transition: All 1s ease;
}

#redcrab:hover {
    width: 44vh;
    height: 26vh;
    transform: scale(2);
}

/*********** SERVICIOS ***********/

.servicios {
    position: relative;
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #bbb;
    padding-top: 10vh;
    padding-bottom: 14vh;
}

serviciosdiv {
    padding-left: 15px;
    padding-right: 15px;
}

.servicios h1 {
    font-family: 'Montserrat bold', 'Oswald', sans-serif;
    font-size: 4.7em;
    text-transform: uppercase;
    line-height: 7rem;
    color: transparent;
    background: #888;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.4);
    border: 0px solid #000;
}

.servicios h2 {
    font-family: 'Montserrat', 'Manrope', sans-serif;
    font-size: 3.3rem;
    line-height: 7rem;
    text-transform: uppercase;
    color: #bbb;
    font-weight: 500;
    color: transparent;
    background: #888;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}

.servicios p {
    width: 70rem;
    font-family: 'Googlesans', sans-serif;
    font-size: 1.8rem;
    color: #555;
    padding-top: 2rem;
    text-align: justify;
}

/******** SERVICIOS_SIDE *********/

serviciosside {
    z-index: 11;
    position: absolute;
    background: transparent;
    width: 40rem;
    height: 88rem;
    right: 20%;
    top: 30vh;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}

serviciosside columna1 {
    z-index: 2;
    display: flex;
    flex-flow: column;
    padding-top: 10rem;
    /* importante poner en wrap */
    perspective: 800px;
    perspective-origin: -20% 65%;
    animation: salto 4s infinite ease;
    animation-delay: 1.5s;
}

serviciosside columna2 {
    background: transparent;
    display: flex;
    flex-flow: column;
    padding-bottom: 8rem;
    /* importante poner en wrap */
    perspective: 800px;
    perspective-origin: -20% 55%;
    animation: salto 4s infinite ease;
}

serviciosside columna2:hover {
    z-index: 2;
}

serviciosside div {
    height: 100%;
    margin-bottom: .5rem;
    border-radius: 15px;
    transform-origin: left;
    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

serviciosside div:hover {
    transform: rotateY(-20deg) translateX(-1rem) translateY(-0rem);
    box-shadow: 10px 5px 3rem rgba(0, 0, 0, .4);
}

columna1 div:nth-child(1) {
    background: url(../index/scard3.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

columna1 div:nth-child(2) {
    background: url(../index/scard2.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

columna2 div:nth-child(1) {
    background: url(../index/scard1.jpg) right center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

columna2 div:nth-child(2) {
    background: url(../index/scard4.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*********** SUGERENCIAS ***********/

.sugerencias {
    position: relative;
    background: rgba(255, 255, 255, 1) url(../index/bg_dsg.jp);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 0px solid #000;
  
}

.cajacomments {
    position: relative;
    overflow: hidden;
    filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.5));
    background: url(../index/palm.png) no-repeat right center, linear-gradient(180deg, #09f 0%, #0c9 77%);
    background-size: 24rem;
    -webkit-border-radius: 3rem;
    border-radius: 1rem;
    padding: 6rem;
    padding-top: 3vh;
    font-family: 'Googlesans', 'Manrope', sans-serif;
    color: #fff;
    font-size: 1.5rem;
    line-height: 3rem;
    font-weight: 100;
    margin-top: 5vh;
    margin-bottom: 12vh;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    width: 70vh;
}

.cajacomments h2 {
    font-family: 'Oswald light', sans-serif;
    font-weight: 100;
    font-size: 3.6rem;
    line-height: 11rem;
}

.backolas {
    position: absolute;
    width: 100%;
    z-index: -1;
    left: 0;
    bottom: 0;
}

.olas2 {
    display: block;
    width: 100%;
    height: 12vh;
    max-height: 200px;
    margin: 0;
    left: 0;
    top: 0;
}

.whiteinput {
    color: #000;
    border: 0px solid #09f;
}

.whitebutton {
    background: rgba(255, 255, 255, .0);
    padding: 1.5rem;
    padding-left: 2.8rem;
    padding-right: 2.8rem;
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-weight: 100;
    font-size: 2rem;
    line-height: 12rem;
    cursor: pointer;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .31s ease;
    -moz-transition: All .31s ease;
    -o-transition: All .31s ease;
    transition: All .3s ease;
}

.whitebutton:hover {
    background: rgba(255, 255, 255, .88);
    color: #000;
    text-decoration: none;
}

.whitebutton:focus {
    color: #fff;
}
.whitebutton2 {
    float: right;
}



.iframecomentarios {
    background: #fff;
    width: 0vh;
    height: 0vh;
    overflow: hidden;
}

/************ FIN SECCION **********/   

#finseccion {
    position: relative;
    width: 100%;
    padding-top: 12vh;
    padding-bottom: 12vh;
    font-size: 4.5rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
    font-weight: bolder;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    background: rgba(255, 255, 255, 1) url(../index/bg_dsg.jpg) repeat;
}

#finseccion div {
    color: transparent;
    background: #888;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.4);
}

/************ DIAMANTE *************/

#diamante {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #000 url(../index/diamond.jpg) center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

frasediamante {
    margin-top: 27vh;
    margin-bottom: 27vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    font-family: 'Fjalla one', 'Oswald', sans-serif;
    font-size: 4vh;
    line-height: 6.4vh;
    text-align: justify;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    border: 0px solid #fff;
}

.diamond {
    width: 8rem;
    margin-right: 1rem;
    margin-top: 1rem;
    border: 0px solid #fff;
}

autor {
    float: right;
    font-size: .5em;
    line-height: 1em;
    padding-top: 1em;
}

.selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

vertical {
    position: absolute;
    width: 1.2px;
    height: 8rem;
    bottom: -4rem;
    z-index: 12;
    background: gray;
}


/******* EL_CUADRO_NEGRO **********/

.mismarcas::after,
.misredes::after,
.libros::after {
    content: '';
    position: absolute;
    z-index: 10;
    width: 15vw;
    height: 20vw;
    top: 20vh;
    right: 18vw;
    border: 1vh solid #000;
}


/******* MIS MARCAS *****************/

.mismarcas {
    position: relative;
    overflow: hidden;
    background: #fff;
    width: 100%;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20vh;
    padding-bottom: 68vh;
    padding-left: 15vh;
    padding-right: 15vh;
}

.infomarcas {
    width: 74rem;
    z-index: 1;
    background: rgba(0, 255, 255, 0);
    padding-top: 0vw;
    padding-bottom: 8vw;
    margin-left: 6vw;
    border: 0px solid #ccc;
    text-align: justify;
    align-self: flex-start;
}

.infomarcas h1 {
    font-family: 'Bebasneue', 'Montserrat bold', 'Oswald', sans-serif;
    font-size: 8.5rem;
    line-height: 2rem;
    text-transform: uppercase;
}

.infomarcas h2 {
    font-family: 'Montserrat', 'Manrope', sans-serif;
    font-size: 2.8rem;
    line-height: 9rem;
}

.infomarcas p {
    font-family: 'Rubik', 'Googlesans', sans-serif;
    font-size: 1.88rem;
}

.marcas {
    z-index: 1;
    width: 70%;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(255, 0, 255, 0);
    border: 0px solid #000;
    padding-left: 4vw;
    padding-right: 4vw;
}

.marcas div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

marca {
    display: block;
    width: 16vw;
    height: 18vw;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .1), 0px 30px 20px rgba(0, 0, 0, .1);
    filter: drop-shadow(1px 1px 11px rgba(0, 0, 0, .1));
    margin-bottom: 1.5vh;
    border: 2px solid #fff;
    cursor: url(../index/cursor/cursor.png), auto;
}

marca:hover {
    border-radius: 0px;
    border: 2px solid #000;
}

#m1 {
    background: url(../mismarcas/001.jpg) center center;
}

#m2 {
    background: url(../mismarcas/002.jpg) center center;
}

#m3 {
    background: url(../mismarcas/003.jpg) center center;
}

#m4 {
    background: url(../mismarcas/101.jpg) center center;
}

#m5 {
    background: url(../mismarcas/102.jpg) center center;
}

#m6 {
    background: url(../mismarcas/201.jpg) center center;
}

#m7 {
    background: url(../mismarcas/301.jpg) center center;
}

#m8 {
    background: url(../mismarcas/.jpg) center center;
}

#m9 {
    background: url(../mismarcas/.jpg) center center;
}

#m10 {
    background: url(../mismarcas/.jpg) center center;
}

#m1,
#m2,
#m3,
#m4,
#m5,
#m6,
#m7,
#m8,
#m9,
#m10 {
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -ms-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 1.1s ease;
    -moz-transition: All 1.1s ease;
    -o-transition: All 1.1s ease;
    transition: All 1.1s ease;

}

#m1:hover {
    background-position: 44% 40%;
    background-size: 300%;
}

#m2:hover {
    background-position: 21% 50%;
    background-size: 600%;
}

#m3:hover {
    background-position: 48% 37%;
    background-size: 310%;
}

#m4:hover {
    background-position: 39% 46.3%;
    background-size: 350%;
}

#m5:hover {
    background-position: 85% center;
    background-size: 430%;
}

#m6:hover {
    background-position: 75.2% 29.2%;
    background-size: 380%;
}

#m7:hover {
    background-position: 20% 44%;
    background-size: 400%;
}

backmarcas {
    position: absolute;
    height: 200rem;
    width: 122vh;
    left: 0;
    bottom: 0;
    border: 0px solid #ddd;
    background: url(../index/mini_workspace.jpg) left bottom no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -ms-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

/************ YOGANANDA ************/

.yoga {
    width: 7rem;
    margin-top: 1rem;
    margin-right: 1rem;
    border: 0px solid #fff;
}

#yogananda {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #000 url(../index/lagoon.jpg) center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

fraseyogananda {
    margin-top: 28vh;
    margin-bottom: 28vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    font-family: 'Fjalla one', 'Oswald', sans-serif;
    font-size: 4vh;
    line-height: 6.4vh;
    text-align: left;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    border: 0px solid #fff;
}

/******* MIS REDES ****************/

.misredes {
    z-index: 1;
    position: relative;
    overflow: hidden;
    background: #fff;
    width: 100%;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20vh;
    padding-bottom: 122vh;
    padding-left: 15vh;
    padding-right: 15vh;
    /*background: #fff url(../index/diagram.png)no-repeat top right;
    background-size: 40vh 40vh;
    background-position: 95% 5%; */
}

.inforedes {
    width: 77rem;
    z-index: 1;
    background: rgba(0, 255, 255, 0);
    padding-top: 0vw;
    padding-bottom: 10vw;
    margin-left: 6vw;
    border: 0px solid #ccc;
    text-align: justify;
    align-self: flex-start;
}

.inforedes h1 {
    font-family: 'Bebasneue', 'Montserrat bold', 'Oswald', sans-serif;
    font-size: 8.5rem;
    line-height: 2rem;
    text-transform: uppercase;
}

.inforedes h2 {
    font-family: 'Montserrat', 'Manrope', sans-serif;
    font-size: 2.8rem;
    line-height: 9rem;
}

.inforedes p {
    font-family: 'Rubik', 'Googlesans', sans-serif;
    font-size: 1.88rem;
}

.redes {
    position: relative;
    z-index: 1;
    width: 80%;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    background: rgba(255, 0, 255, 0);
    border: 0px solid #000;
}

.redes div {
    position: relative;
    display: flex;
    flex-flow: column;
    padding-top: 2vh;
    padding-left: 0;
    padding-right: 0;
    border: 0px solid #000;

}

.redes h1 {
    font-family: 'Montserrat bold', 'Oswald', sans-serif;
    font-size: 3rem;
    line-height: 5rem;
    display: flex;
}

.redes h1:hover {
    cursor: pointer;
}

.redes logo {
    position: relative;
    z-index: -11;
    margin-right: 1.2rem;
    font-family: 'Socialmedia', sans-serif;
    font-size: 5rem;
    pointer-events: none;
}

.redes p {
    font-family: 'Googlesans', sans-serif;
    font-size: 1.7rem;
    text-align: justify;
    padding-left: 6.5rem;
    padding-right: 5.5rem;
}

.vertableros {
    cursor: pointer;
}

.vertableros:hover {
    color: red;
}

.phonebg {
    width: 100%;
    height: 810px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
}

.phonebg div {
    position: absolute;
    z-index: -11;
    background: url(../index/phone.png) top left;
    -webkit-background-size: cover;
    background-size: cover;
    width: 432px;
    height: 790px;
    padding: 24px;
}

.phoneiframe {
    background: #000;
    overflow: hidden;
    border-radius: 35px;
    height: 702px;
    width: 325px;
    align-self: center;
}

phonescroll {
    position: absolute;
    width: 44px;
    height: 105px;
    right: -4rem;
    top: 36%;
}

.phoneiframe:hover ~ phonescroll {
    background: url(../index/scroll.svg);
    background-size: cover;
}

/*** YOUTUBE VIDEOS ***/

.videosbg {
    position: relative;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 8vw;
    padding-bottom: 10vh;
}

.videosbg div {
    position: relative;
    z-index: -11;
    width: 50%;
    padding: 0rem;
    display: flex;
    flex-flow: row;
    flex-direction: row-reverse;
    /* CLAVE */
    /* EL WRAP */
    perspective: 1100px;
    perspective-origin: 50% 65%;
}

/*** YOUTUBE HIJOS ***/

.videosbg div div {
    width: 40rem;
    height: 26rem;
    transform-origin: left;
    margin-right: -34rem;
    transform: rotateY(-60deg) translateX(0rem) translateY(0rem);
    box-shadow: 10px 5px 3rem rgba(0, 0, 0, .4);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;
}

.videosbg div div:nth-child(1) {
    background: #0ff url(../index/videobg4.jpg);
    background-size: cover;
    animation: videobg 3s ease infinite;
    animation-delay: 1s;

}

.videosbg div div:nth-child(2) {
    background: #0ff url(../index/videobg3.jpg);
    background-size: cover;
    animation: videobg 3s ease infinite;
    animation-delay: 2s;

}

.videosbg div div:nth-child(3) {
    background: #0ff url(../index/videobg2.jpg);
    background-size: cover;
    animation: videobg 3s ease infinite;
    animation-delay: .5s;
}

.videosbg div div:nth-child(4) {
    background: #0ff url(../index/videobg1.jpg);
    background-size: cover;
    animation: videobg 3s ease infinite;
}

@keyframes videobg {

    0% {
        transform: rotateY(-60deg) translateX(0rem) translateY(0rem);
    }

    50% {
        transform: rotateY(-60deg) translateX(0rem) translateY(1rem);
    }

    100% {
        transform: rotateY(-60deg) translateX(0rem) translateY(0rem);
    }
}

.subred {
    margin-left: 10rem;
}

.subred logo {
    position: relative;
    z-index: -11;
    margin-right: 1.2rem;
    font-family: 'Socialmedia', sans-serif;
    font-size: 3rem;
    line-height: 3rem;
    pointer-events: none;
}

.subred t1 {
    font-family: 'Montserrat bold', 'Oswald', sans-serif;
    font-size: 2.3rem;
    display: flex;
}

.subred t1:hover {
    cursor: pointer;
}

.subred p {
    font-family: 'Googlesans', sans-serif;
    font-size: 1.7rem;
    text-align: justify;
    padding-left: 4.5rem;
    padding-right: 5.2rem;
}


/**** MÁS REDES ***/
.mredes {
    position: relative;
    z-index: 1;
    width: 120vh;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 4vh;
    background: rgba(255, 0, 255, 0);
    border: 0px solid #000;
}

.mredes div {
    position: relative;
    display: flex;
    flex-flow: column;
    padding-top: 2vh;
    padding-left: 2vh;
    padding-right: 12vh;
    padding-bottom: 2vh;
    border-radius: 3px;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .1s ease;
    -moz-transition: All .1s ease;
    -o-transition: All .1s ease;
    transition: All .1s ease;

}

.mredes h1 {
    font-family: 'Montserrat bold', 'Oswald', sans-serif;
    font-size: 2.88rem;
    line-height: 4rem;
    display: flex;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .1s ease;
    -moz-transition: All .1s ease;
    -o-transition: All .1s ease;
    transition: All .1s ease;
}

.mredes div:hover {
    cursor: pointer;
}

.mredes logo {
    position: relative;
    z-index: -11;
    margin-right: 1.2rem;
    font-family: 'Socialmedia', sans-serif;
    font-size: 5rem;
    pointer-events: none;
}

.mredes p {
    font-family: 'Googlesans', sans-serif;
    font-size: 1.7rem;
    text-align: justify;
    padding-left: 6.5rem;
    padding-right: 5.5rem;
}

.rpinterest:hover {
    color: red;
}

.rutube:hover {
    color: #d00;
}

.rtwitter:hover {
    color: #1A8CD8;
}

.rvimeo:hover h1 {
    color: deepskyblue;
}

.rlinkedin:hover h1 {
    color: #0A66C2;
}

.rissuu:hover h1 {
    color: orangered;
}

.rinstagram:hover h1 {
    color: deeppink;
}

.rcodepen:hover h1 {
    color: #0c9;
}

.rinvision:hover h1 {
    color: #FF3366;
}

.rreddit:hover h1 {
    color: orangered;
}

.rwhatsapp:hover h1 {
    color: #48FF97;
}

.rtelegram:hover h1 {
    color: #3390EC;
}

.rtwitch:hover h1 {
    color: #772CE8;
}

.rdiscord:hover h1 {
    color: #5865F2;
}

.rsteam:hover h1 {
    color: #5c7e10;
}

.rlinktree:hover h1 {
    color: #0d4;
}

.bordevimeo:hover {
    box-shadow: 0px 0px 0px 5px deepskyblue inset;
}

.bordelinkedin:hover {
    box-shadow: 0px 0px 0px 5px #0A66C2 inset;
}

.bordeissuu:hover {
    box-shadow: 0px 0px 0px 5px orangered inset;
}

.bordeinstagram:hover {
    box-shadow: 0px 0px 0px 5px deeppink inset;
}

.bordecodepen:hover {
    box-shadow: 0px 0px 0px 5px #0c9 inset;
}

.bordeinvision:hover {
    box-shadow: 0px 0px 0px 5px #FF3366 inset;
}

.bordereddit:hover {
    box-shadow: 0px 0px 0px 5px orangered inset;
}

.bordewhatsapp:hover {
    box-shadow: 0px 0px 0px 5px #48FF97 inset;
}

.bordetelegram:hover {
    box-shadow: 0px 0px 0px 5px #3390EC inset;
}

.bordetwitch:hover {
    box-shadow: 0px 0px 0px 5px #772CE8 inset;
}

.bordediscord:hover {
    box-shadow: 0px 0px 0px 5px #5865F2 inset;
}

.bordesteam:hover {
    box-shadow: 0px 0px 0px 5px #5c7e10 inset;
}

.bordelinktree:hover {
    box-shadow: 0px 0px 0px 5px #0d4 inset;
}

backredes {
    position: absolute;
    height: 200vh;
    width: 100vw;
    left: 0;
    bottom: 0vh;
    border: 0px solid #ddd;
    background: url(../index/typer.jpg) right bottom no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -ms-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

/************ JOBS ************/

.gafas {
    width: 12rem;
    margin-top: 2rem;
    margin-right: 1rem;
    border: 0px solid #fff;
}

#jobs {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #000 url(../index/desert.jpg) center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

frasejobs {
    margin-top: 30vh;
    margin-bottom: 30vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    font-family: 'Fjalla one', 'Oswald', sans-serif;
    font-size: 3.8vh;
    line-height: 6.4vh;
    text-align: left;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    border: 0px solid #fff;
}

/******* LIBROS ****************/

.seccionlibros {
    position: relative;
    overflow: hidden;
    background: #fff;
    width: 100%;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20vh;
    padding-bottom: 48vh;
    padding-left: 15vh;
    padding-right: 15vh;
}

.infolibros {
    width: 74rem;
    z-index: 1;
    background: rgba(0, 255, 255, 0);
    padding-top: 0vw;
    padding-bottom: 10vw;
    margin-left: 6vw;
    border: 0px solid #ccc;
    text-align: justify;
    align-self: flex-start;
}

.infolibros h1 {
    font-family: 'Bebasneue', 'Montserrat bold', 'Oswald', sans-serif;
    font-size: 8.5rem;
    line-height: 2rem;
    text-transform: uppercase;
}

.infolibros h2 {
    font-family: 'Montserrat', 'Manrope', sans-serif;
    font-size: 2.8rem;
    line-height: 9rem;
}

.infolibros p {
    font-family: 'Rubik', 'Googlesans', sans-serif;
    font-size: 1.88rem;
}

.libros {
    overflow: visible;
    z-index: 1;
    width: 80%;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 0, 255, 0);
    border: 0px solid #000;
}

.libros div {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    /*OJO*/
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border: 0px solid #000;
    font-size: 2rem;
    padding-bottom: 3vh;

}

lwrap {
    position: relative;
    /* importante poner en wrap */
    perspective: 1800px;
    perspective-origin: -50% 50%;
    border: 10px solid transparent;
}

libro {
    position: relative;
    z-index: 12;
    width: 18vh;
    height: 28vh;
    box-shadow: -10px 10px 20px rgba(0, 0, 0, .1);
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: -40%;
    background: #0f0;
    cursor: pointer;

    /*ANIMACION SUAVE*/
    -webkit-transition: All 2s ease;
    -moz-transition: All 2s ease;
    -o-transition: All 2s ease;
    transition: All 2s ease;
}

ficha {
    position: absolute;
    z-index: -1;
    cursor: pointer;
    width: 45px;
    height: 50px;
    background: #000;
    color: #fff;
    right: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    border-radius: 2px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .5s ease;


}

lwrap:hover > libro {
    transform: rotateY(-38deg) translateX(-.5rem) translateZ(0rem);
    box-shadow: 25px 15px 4rem rgba(0, 0, 0, .3);

    /*ANIMACION SUAVE*/
    -webkit-transition: All .35s ease;
    -moz-transition: All .35s ease;
    -o-transition: All .35s ease;
    transition: All .35s ease;
}

lwrap:hover > librob > ficha {
    right: -35px;
    pointer-events: all;

    /*ANIMACION SUAVE*/
    -webkit-transition: All .5s ease;
    -moz-transition: All .5s ease;
    -o-transition: All .5s ease;
    transition: All .6s ease;

}

librob {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 18.2vh;
    height: 28vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .1);
}

librob::after {
    content: '';
    position: absolute;
    width: 17.2vh;
    height: 28vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .1);
}

librotit {
    display: block;
    font-family: 'Fjalla one', sans-serif;
    font-size: 2.2rem;
    padding: 2vh;
    padding-top: 3vh;
    padding-bottom: 3vh;
    text-align: center;
}

libroautor {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 1.8rem;
    font-weight: 1000;
    line-height: 4rem;
}

.itemlargo {
    grid-column: span 2;
}

.itemalto {
    grid-row: span 2;
}

backlibros {
    position: absolute;
    height: 1000rem;
    width: 100vw;
    left: 0;
    bottom: 0;
    border: 0px solid #ddd;
    background: url(../index/palmer.jpg) left bottom no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -ms-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

/************ MAGNA ************/

.vientos {
    width: 7.5rem;
    margin-top: 1rem;
    margin-right: 1rem;
    border: 0px solid #fff;
}

#magna {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #000 url(../index/green.jpg) center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

frasemagna {
    margin-top: 30vh;
    margin-bottom: 30vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    font-family: 'Fjalla one', 'Oswald', sans-serif;
    font-size: 4vh;
    line-height: 6.4vh;
    text-align: left;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    border: 0px solid #fff;
}

/************ FREELANCING **********/

.freelancing {
    position: relative;
    background: rgba(0, 255, 0, 1);
    width: 100%;
    height: 100vh;
}

/************ ANCLAS **********/

#S {
    position: relative;
    top: -33vh;
}

#M {
    position: relative;
    top: -11vh;
}

#R {
    position: relative;
    top: -11vh;
}

#L {
    position: relative;
    top: -11vh;
}

#F {
    position: relative;
    top: -11vh;
}

/************ FOOTER TOOLS **********/

footer {
    background: #000;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 2vh;
}

.footer {
    background: rgba(0, 0, 0, 1);
    font-size: 1.2rem;
    display: grid;
    grid-auto-columns: column;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2px;
}

.footer div {
    display: block;
    text-align: right;
    padding: 2rem;
}

.footer h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.1rem;
}

.footer a {
    color: #fff;
    font-family: 'Verdana', 'Geneva', sans-serif;
    font-size: 1.2rem;
    text-decoration: none;
}

.footer a:hover {
    color: #0fb;
    cursor: pointer;
    text-decoration: none;
}

#flecharriba {
    position: relative;
    top: 0px;
    font-family: 'Websymbols';
    font-size: 4rem;
    color: #ccd;
    line-height: 20px;
    text-align: center;
}

#flecharriba:hover {
    color: #fff;
}

#flechatop {
    position: absolute;
    z-index: 111;
    bottom: 4vh;
    right: 15%;
    font-family: 'Websymbols', sans-serif;
    font-size: 4rem;
    font-weight: 100;
    color: #000;
    transform: rotate(-90deg);
}

#flechatop:hover {
    color: #0fb;
    cursor: pointer;
}

/*********** DSG PARALLAX ***********/

.dsgparallax {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff url(../index/everest.jpg) center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

.thanks {
    color: #000;
    font-family: 'Montserrat bold', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2.3rem;
    line-height: 14vh;
    word-spacing: 1rem;
    letter-spacing: 1rem;
    text-align: center;
}

#footdsg {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
}

#footdsg img {
    width: 35vh;
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.followme {
    color: #000;
    font-family: 'Montserrat bold', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 10vh;
    letter-spacing: 2px;
    text-align: center;
}

.dsgredes {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, .0);
    display: block flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    font-family: 'Oswald extralight', 'Verdana', sans-serif;
    color: #000;
    text-decoration: none;
    padding-top: 0vh;
    padding-bottom: 15vh;
}

.dsgcopyright {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(250, 250, 250, .55);
    padding-top: 2vh;
    padding-bottom: 3vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: black;
    font-size: 1.2rem;
    line-height: .5vh;
}

/*************** ICONS **************/

.iconosocial {
    text-decoration: none;
    display: inline-block;
    font-family: 'Socialmedia';
    font-size: 3.4rem;
    padding-right: 10px;
    vertical-align: text-top;
    color: #000;
    line-height: 1.6em;
}

.iconosocial:hover {
    text-decoration: none;
    transform: scale(1.1);
}

.iconosocial:focus {
    color: #888;
}

.iutube:hover {
    color: #d00;
}

.itwitter:hover {
    color: #1A8CD8;
}

.ivimeo:hover {
    color: deepskyblue;
}

.ifbook:hover {
    color: #08e;
}

.ilinkedin:hover {
    color: #0A66C2;
}

.ipinterest:hover {
    color: #b00;
}

.iissuu:hover {
    color: orangered;
}

.iinstagram:hover {
    color: deeppink;
}

.icodepen:hover {
    color: #0c9;
}

.iinvision:hover {
    color: #FF3366;
}

.ireddit:hover {
    color: orangered;
}

.iwhatsapp:hover {
    color: #48FF97;
}

.itelegram:hover {
    color: #3390EC;
}

.itwitch:hover {
    color: #772CE8;
}

.idiscord:hover {
    color: #5865F2;
}

.isteam:hover {
    color: #5c7e10;
}

.iconosocial2 {
    text-decoration: none;
    display: inline-block;
    font-family: 'Socialico';
    font-size: 3.5rem;
    padding-right: 10px;
    vertical-align: text-top;
    color: #000;
    line-height: 1.6em;
}

.enlacefooter {
    color: #222;
    text-decoration: none;
}

.enlacefooter:hover {
    color: #888;
    text-decoration: none;
}

/********** OLAS DE MAR ***********/

.olas {
    position: absolute;
    z-index: -5;
    display: block;
    width: 100%;
    height: 3.4vh;
    max-height: 200px;
    margin: 0;
    z-index: 5;
    bottom: -10px;
    left: 0;
    float: left;
}

.parallax1 > use {
    animation: move-forever1 12s linear infinite;

    &:nth-child(1) {
        animation-delay: -2s;
    }
}

.parallax2 > use {
    animation: move-forever2 10s linear infinite;

    &:nth-child(1) {
        animation-delay: -2s;
    }
}

.parallax3 > use {
    animation: move-forever3 8s linear infinite;

    &:nth-child(1) {
        animation-delay: -2s;
    }
}

.parallax4 > use {
    animation: move-forever4 6s linear infinite;

    &:nth-child(1) {
        animation-delay: -2s;
    }
}

@keyframes move-forever1 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@keyframes move-forever3 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@keyframes move-forever4 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

/********* GPU **********/

.gpu {
    will-change: transform, opacity;
}

/********* HIDERS **********/

.visible-xs {
        display:none;
    }

/*********** RESOLUZZER ***********/

#displayres {
    opacity: 0;
    position: fixed;
    z-index: 0;
    left: 0;
    top: 24rem;
    width: 30px;
    display: block;
    background: rgba(0, 0, 100, .0);
    font-family: 'Googlesans', sans-serif;
    font-size: 1.29rem;
    line-height: 3rem;
    text-align: left;

}

.res {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: rotate(-90deg);
    text-align: right;
}

.d3840,
.d2560,
.d1920,
.d1680,
.d1440,
.d1024,
.d775 {
    visibility: hidden;
}

.d3840 {
    visibility: visible;
}

/******* 2560px Hacia abajo **********/
@media screen and (max-width: 2560px) {

    .d3840,
    .d2560,
    .d1920,
    .d1680,
    .d1440,
    .d1024,
    .d775 {
        visibility: hidden;
    }

    .d2560 {
        visibility: visible;
    }

    html {
        font-size: 9.2px;
    }
}

/******* 1920px Hacia abajo **********/
@media screen and (max-width: 1920px) {

    .d3840,
    .d2560,
    .d1920,
    .d1680,
    .d1440,
    .d1024,
    .d775 {
        visibility: hidden;
    }

    .d1920 {
        visibility: visible;
    }
    
    html {
        font-size: 7.8px;
    }

    .dsgcopyright {
        font-size: 1.2rem;
    }

    phonebg {
        left: 6.88vw;
    }
    
}

/******* 1680px Hacia abajo *********/
@media screen and (max-width: 1688px) {

    .d3840,
    .d2560,
    .d1920,
    .d1680,
    .d1440,
    .d1024,
    .d775 {
        visibility: hidden;
    }

    .d1680 {
        visibility: visible;
    }

    html {
        font-size: 7.8px;
    }

    .descripcapital {
        font-size: 6rem;
    }

}

/******* 1440px Hacia abajo *********/
@media screen and (max-width: 1444px) {

    .d3840,
    .d2560,
    .d1920,
    .d1680,
    .d1440,
    .d1024,
    .d775 {
        visibility: hidden;
    }

    .d1440 {
        visibility: visible;
    }

    html {
        font-size: 7.5px;
    }

    .descrip {
        font-size: 3rem;
    }

    .descripcapital {
        font-size: 7rem;
    }

    #lateralin {
        width: 50vw;
    }
    
    #lateralclose {
        right: 45.4%;
    }    
    
    serviciosside {
        right: 15%;
    }

}

/******* 1366px Hacia abajo *********/
@media screen and (max-width: 1377px) {

    .d3840,
    .d2560,
    .d1920,
    .d1680,
    .d1440,
    .d1024,
    .d775 {
        visibility: hidden;
    }

    .d1440 {
        visibility: visible;
    }

    html {
        font-size: 7px;
    }

    .descrip {
        font-size: 2.65rem;
    }

    .descripcapital {
        font-size: 7rem;
    }

    .sandwichrib {
        height: 1.5px;
    }

    #lateralin {
        width: 50vw;
    }

    #lateralclose {
        right: 45.5%;
    }
    
    serviciosside {
        right: 20%;
    }

}

/******* 1024px Hacia abajo *********/
@media screen and (max-width: 1030px) {

    .d3840,
    .d2560,
    .d1920,
    .d1680,
    .d1440,
    .d1024,
    .d775 {
        visibility: hidden;
    }

    .d1024 {
        visibility: visible;
    }

    html {
        font-size: 6.5px;
    }

    #MINIBARRAS {
        display: none;
    }

    .descrip {
        font-size: 2.4rem;
    }

    .descripcapital {
        font-size: 6.5rem;
    }

    .sandwichrib {
        height: 1.5px;
    }

    #lateralin {
        width: 70vw;
    }
    
    #lateralclose {
        right: 64.5%;
    }


    serviciosside {
        right: 12%;
    }

    .mismarcas {
        padding-left: 5vh;
        padding-right: 5vh;
    }

    .misredes {
        padding-left: 5vh;
        padding-right: 5vh;
    }
}

/******* 775px Hacia abajo *********/
@media screen and (max-width: 775px) {
    .d3840,
    .d2560,
    .d1920,
    .d1680,
    .d1440,
    .d1024,
    .d775 {
        visibility: hidden;
    }

    .d775 {
        visibility: visible;
    }

    html {
        font-size: 7.8px;
    }

    .visible-xs {
        display: block;
    }
    
    .hidden-xs {
        display: none;
    }
    
    body {
        /* NO SELECCIONA EN MÓVILES */
        -webkit-user-select: none;
        /* Safari 3.1+ */
        -moz-user-select: none;
        /* Firefox 2+ */
        -ms-user-select: none;
        /* IE 10+ */
        user-select: none;
        /* Standard syntax */
    }

    .efadein {
        opacity: 0;
        animation: .3s efadein forwards;
    }

    #cookies {
        z-index: 1147483647;
        bottom: 8vh;
        left: 14vh;
        background: rgba(11, 11, 22, .99);
    }

    #cbutton {
        top: -4.5rem;
    }

    #cbuttonpriv {
        top: -4.5rem;
    }

    #overall {
        background: url(../index/104.jpg) no-repeat right center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    #dsglogo {
        max-width: 30vh;
        min-width: 50vw;
        padding-bottom: 5vh;
    }

    #flechabajo {
        width: 37vw;
    }


    #overallintro {
        box-shadow: 0;
        border-radius: 0;
        width: 100%;
        height: 100%;
    }

    #welcome {
        width: 92%;
    }

    #videofondo {
        transform: scaleX(1);
        filter: saturate(1.1);
    }

    P1 {
        width: 80%;
    }

    P1 h1,
    P1 h2,
    P1 h3 {
        padding: 0rem;
    }

    P1 h1 {
        font-size: 7rem;
        line-height: 4rem;
    }

    P1 h2 {
        font-size: 3.3rem;
        padding-top: 2rem;
    }

    P1 h3 {
        line-height: 3.1rem;
    }

    P1 a {
        text-decoration: underline;

    }

    #flechabajo2 {
        width: 20vh;
        bottom: 12vh;
    }

    #wbuttonclose {
        width: 5.8rem;
        left: 2vw;
        top: 2vw;
    }

    #buttoninfo {
        right: 3.3rem;
    }

    #lateralin {
        width: 100%;
    }
    
    #lateralclose {
        right: 95%;
    }

    /*****MASCARA *******/

    #mascara {
        justify-content: center;
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    #compartirenredes {
        position: absolute;
        z-index: 1;
        top: 2.5vw;
        right: 20vw;
        background: rgba(0, 0, 0, 0);
        width: 15rem;
        height: 4rem;
        display: flex;
        flex-direction: row;
    }

    #fechatop {
        top: 3.8vw;
        right: 14vw;
    }

    #flechaback {
        right: 3vw;
        top: 3vw;
    }

    .rainbow {
        width: 1vw;
    }

    .descrip {
        right: 0px;
        font-size: 2rem;
    }

    .descripcapital {
        font-size: 5.5rem;
        left: 12vw;
    }

    .descrip::before {
        content: ' ';
        position: absolute;
        z-index: 2;
        left: 5.5vw;
        top: 4vh;
        width: 0;
        height: 0;
        border-top: 0px solid #fff;
        border-left: 0px solid #fff;
        border-top-left-radius: 2px;
    }

    .descrip::after {
        content: ' ';
        position: absolute;
        z-index: 2;
        right: 6vw;
        bottom: 5.5vh;
        width: 0;
        height: 0;
        border-bottom: 0px solid #fff;
        border-right: 0px solid #fff;
        border-bottom-right-radius: 2px;
    }

    .leitmotiv {
        position: absolute;
        overflow: hidden;
        right: 5vw;
        bottom: -30vw;
        width: 22vw;
        height: 22vw;
        border-radius: 50%;
        z-index: 1000;
        display: flex;
        justify-content: center;
    }

    @keyframes desglose {
        0% {
            height: 0%;
            width: 77%;
            right: 5vw;
        }

        30% {
            height: 0%;
            width: 77%;
            padding: 0vh;
            right: 5vw;
        }

        65% {
            height: 45%;
            width: 77%;
            padding: 15vw;
            padding-right: 16vw;
            padding-top: 16vh;
            right: 5vw;
        }

        100% {
            height: 45%;
            width: 77%;
            padding: 15vw;
            padding-right: 15vw;
            padding-top: 17vh;
            right: 5vw;
        }
    }

    @keyframes desglosecapital {
        0% {
            visibility: hidden;
            opacity: 0;
        }

        65% {
            visibility: visible;
            opacity: 0;
            top: 8vh;
        }


        100% {
            visibility: visible;
            opacity: 1;
            top: 7vh;
        }

    }

    @keyframes desglosetext {
        0% {
            color: transparent;
            background: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0);
        }

        65% {
            color: transparent;
            background: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0);
        }

        100% {
            color: transparent;
            background: #000;
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
        }
    }

    @keyframes desgloseleft {
        0% {
            height: 0;
            width: 0;
        }

        100% {
            height: 30vw;
            width: 25vw;
            border-top: 1.5px solid #000;
            border-left: 1.5px solid #000;
            border-top-left-radius: 5px;

        }
    }

    @keyframes desgloseright {
        0% {
            height: 0;
            width: 0;
        }

        100% {
            height: 35vw;
            width: 20vw;
            border-bottom: 1.5px solid #000;
            border-right: 1.5px solid #000;
            border-bottom-right-radius: 5px;

        }
    }

    .sidebutton {
        width: 4.6rem;
        height: 4.6rem;
        right: -4.6rem;
        font-size: 3em;
        line-height: 3rem;
    }

    .sandwichrib {
        height: 1px;
    }

    .sidebuttonM {
        top: 0;
    }

    .sidebuttonP {
        top: 9.7rem;
    }

    .sidebuttonT {
        top: 5rem;
    }

    /**** FOTOMOVIL *****/

    #fotomovil {
        opacity: 0;
        width: 100%;
        height: 0vh;
        -webkit-border-radius: 0%;
        border-radius: 0;
        box-sizing: content-box;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        border: 0px solid #fff;

        /*ANIMACION SUAVE*/
        -webkit-transition: All .5s ease;
        -moz-transition: All .5s ease;
        -o-transition: All .5s ease;
        transition: All .5s ease;
    }

    #fotomovil::after {
        content: ' ';
        position: absolute;
        width: 15rem;
        height: 15rem;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        box-sizing: content-box;
        background: url(../_fotorapida2.jpg) no-repeat left center, #725655;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        opacity: 0;
        animation: bouncing 5s infinite ease;

        /*ANIMACION SUAVE*/
        -webkit-transition: All .5s ease;
        -moz-transition: All .5s ease;
        -o-transition: All .5s ease;
        transition: All 1s ease;
    }

    .descripmovil {
        opacity: 0;
        margin-top: 5vh;
        margin-bottom: 12vh;
        margin-left: 6vh;
        margin-right: 6vh;
        padding: 3.3vw;
        font-family: 'Oswald light', sans-serif;
        font-size: 1.88rem;
        text-align: center;
        text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
        border: 1px solid #fff;
        border-radius: 5px;
        align-self: center;

        /*ANIMACION SUAVE*/
        -webkit-transition: All .5s ease;
        -moz-transition: All .5s ease;
        -o-transition: All .5s ease;
        transition: All .5s ease;
    }

    .showfotomovil:hover ~ #fotomovil::after {
        opacity: 1;
        /*ANIMACION SUAVE*/
        -webkit-transition: All 1s ease;
        -moz-transition: All 1s ease;
        -o-transition: All 1s ease;
        transition: All 1s ease;
    }

    /*** INTROTEXTO ***/

    #introtitulo {
        line-height: 2rem;
        padding-left: 16vw;
        font-size: 2em;
    }

    .introtexto {
        line-height: 4.4rem;
        font-size: 4rem;
        padding-left: 20vw;
    }

    /*** PORTAFOLIO ***/

    .widers {
        max-width: 90vw;
    }

    .widers_wide {
        max-width: 96vw;
    }

    .portfolio {
        max-width: 94vw;
        top: -10vh;
    }

    /**** DESTACADOS ****/

    .maxtitulo {
        margin-top: 0vh;
        margin-bottom: 0vh;
        font-size: 3rem;
    }

    .maxtitulo2 {
        top: -10vw;
        font-size: 1.5em;
    }

    titulo {
    font-size: 3rem;
    }    

    titulo2 {
    font-size: 1.5rem;
    }    

    .pendiente {
        padding: 3vw;
        align-self: left;
    }

    .cosmica,
    .verdementa,
    .petshop,
    .xperience {
        align-self: center;
        width: 96%;
    }

    .motions {
        grid-template-columns: repeat(3, 1fr);
    }

    .websitesui {
        grid-template-columns: repeat(3, 1fr);
    }

    .websitesui2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .instalaciones {
        grid-template-columns: repeat(3, 1fr);
    }

    .anotacion {
        flex-flow: column;
        align-items: flex-end;
    }

    /******* AUMENTADA *******/

    .ravideo {
        grid-column: 1 / 6;
        height: 45vh;
    }

    .ravisor {
        height: 100%;
    }

    .visorover {
        height: 100%;
    }

    .raumentada {
        grid-column: 1 / 6;
    }

    /******* PALMSBEACH *******/

    .palmsbeach {
        height: 35vh;
    }

    .beachplease {
        margin-top: 0vh;
        font-size: 1.2em;
    }

    #redcrab {
        position: absolute;
        bottom: -20vh;
        width: 34vh;
    }

    /******* SERVICIOS *******/

    .servicios {
        padding-top: 15vh;
        padding-bottom: 10vh;
        padding-left: 5vh;
        padding-right: 5vh;
    }

    .servicios h1 {
        font-size: 4rem;
        line-height: 5rem;
    }

    .servicios p {
        width: 100%;
    }

    /******* SUGERENCIAS *******/

    .whitebox {
        width: 92vw;
        font-size: 1.8rem;
        padding: 4vh;
    }

    .whitebox h2 {
        font-size: 4rem;
        line-height: 7rem;
    }

    .olas2 {
        height: 18vw;
    }

    #finseccion {
        padding-top: 8vh;
        padding-bottom: 8vh;
        font-size: 4rem;
    }

    .iframecomentarios {
        width: 88vw;
    }

    /******* FRASE *******/

    frasediamante {
        margin-top: 15vh;
        margin-bottom: 15vh;
        font-size: 3.8rem;
    }

    /******* MARCAS *******/

    .mismarcas {
        padding-bottom: 50vh;
        padding-top: 16vh;
        padding-left: 0vh;
        padding-right: 0vh;
    }

    .infomarcas {
        width: 100%;
        z-index: 1;
        background: rgba(0, 255, 255, 0);
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 0vw;
        padding-bottom: 20vw;
        text-align: justify;
        margin-left: 0;
    }

    .infomarcas h1 {
        font-size: 5rem;
    }

    .marcas {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        padding-left: 5vw;
        padding-right: 5vw;
    }

    marca {
        display: block;
        width: 40vw;
        height: 45vw;
        background: #fff;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, .1), 0px 30px 20px rgba(0, 0, 0, .1);
        filter: drop-shadow(1px 1px 11px rgba(0, 0, 0, .1));
        margin-bottom: 2vh;
        border: 2px solid #fff;
        background-position: center center;
        background-size: 300px;
    }

    backmarcas {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        bottom: 0;
        border: 0px solid #ddd;
        background: url(../index/mini_workspace.jpg) left bottom no-repeat;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -ms-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }

    /******* FRASE *******/

    fraseyogananda {
        margin-top: 15vh;
        margin-bottom: 15vh;
        padding-left: 3vh;
        padding-right: 4vh;
        font-size: 3.8rem;
    }

    /******* REDES *******/

    .misredes {
        padding-bottom: 77vh;
        padding-top: 16vh;
        padding-left: 0vh;
        padding-right: 0vh;
    }

    .inforedes {
        width: 100%;
        z-index: 1;
        background: rgba(0, 255, 255, 0);
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 0;
        padding-bottom: 2vh;
        text-align: justify;
        margin-left: 0;
    }

    .inforedes h1 {
        font-size: 5rem;
    }

    .redes {
        grid-template-columns: repeat(1, 1fr);
    }

    backredes {
        position: absolute;
        height: 888rem;
        width: 100%;
        left: 0;
        bottom: 0;
        border: 0px solid #ddd;
        background: url(../index/typer.jpg) left bottom no-repeat;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -ms-background-size: contain;
        -o-background-size: contain;
        background-size: 188%;
        background-position: 49% 100%;
    }

    /******* FRASE *******/

    frasejobs {
        margin-top: 15vh;
        margin-bottom: 15vh;
        padding-left: 3vh;
        padding-right: 4vh;
        font-size: 3.8rem;
    }

    /******* LIBROS *******/

    .seccionlibros {
        padding-bottom: 60vh;
        padding-top: 16vh;
        padding-left: 0vh;
        padding-right: 0vh;
    }

    .infolibros {
        width: 100%;
        z-index: 1;
        background: rgba(0, 255, 255, 0);
        padding-left: 10vw;
        padding-right: 10vw;
        padding-top: 0vw;
        padding-bottom: 20vw;
        text-align: justify;
        margin-left: 0;
    }

    .infolibros h1 {
        font-size: 5rem;
    }

    .libros {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .libros div {
        flex-direction: column;
        /*<<<<<*/
        justify-content: center;
        align-items: center;
        font-size: 1.6rem;
    }

    librotit {
        font-size: 2rem;
        text-align: center;
    }

    libroautor {
        font-size: 1.6rem;
        line-height: 3rem;
    }

    backlibros {
        position: absolute;
        height: 888rem;
        width: 100%;
        left: 0;
        bottom: 0;
        background: url(../index/palmer.jpg) left bottom no-repeat;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -ms-background-size: contain;
        -o-background-size: contain;
        background-size: 208%;
        background-position: 88% 100%;
    }

    /******* FRASE *******/

    frasemagna {
        margin-top: 15vh;
        margin-bottom: 15vh;
        padding-left: 3vh;
        padding-right: 4vh;
        font-size: 3.8rem;
    }

    /******* FOOTER *******/

    .footer {
        grid-template-columns: repeat(3, 1fr);
    }

    .thanks {
        font-size: 1.6rem;
    }

    #dsgfoot img {
        width: 33vh;

    }

    .dsgredes {
        position: relative;
        z-index: 1;
        background: rgba(0, 0, 0, .0);
        display: block flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        text-align: center;
        font-size: 1rem;
        font-family: 'Oswald extralight', 'Verdana', sans-serif;
        color: #000;
        text-decoration: none;
        padding: 10vh;
        padding-left: 5vh;
        padding-right: 5vh;
    }

    .dsgcopyright {
        font-size: 1.2rem;
        line-height: 1vh;
    }

}