/*** AQUI EL CURSOR*/
html {
	cursor: url(https://freight.cargo.site/t/original/i/b7c19896f997acc73b2609cf044f9dec92d24d344b708c835735b6b02aaf629a/auto.svg), auto !important;
}
a {
	cursor: url(https://freight.cargo.site/t/original/i/dabd97992e17433284aae8fc7a1ca7ad6899d0f27b7817ed8b794caea87811f7/active.svg), auto !important;
}

/*** AQUI LA FUENTE*/
@font-face {
    font-family: 'Canela-thin';
    src: url('https://files.cargocollective.com/c1913249/Canela-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Canela-regular';
    src: url('https://files.cargocollective.com/c1913249/Canela-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Canela-thin-italic';
    src: url('https://files.cargocollective.com/c1913249/Canela-ThinItalic.otf') format('truetype');
}

@font-face {
    font-family: 'Grotesque-light';
    src: url('https://files.cargocollective.com/c1913249/BasisGrotesqueArabicPro-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Grotesque-regular';
    src: url('https://files.cargocollective.com/c1913249/BasisGrotesqueArabicPro-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Grotesque-medium';
    src: url('https://files.cargocollective.com/c1913249/BasisGrotesqueArabicPro-Medium.ttf') format('truetype');
}

/************************************************/
/************************************************/
/************************************************/
/***HOME***/

/***Contenedor de la página*/
.home-grid{
    top: 0;
    margin:-28;
    padding-top: 2vw;
    padding-right: 8vw; 
    padding-bottom: 2vw;
}

/***Contenedor de cada proyecto*/
.grid{
    position: relative;
    padding-bottom: 0.5vw;
}

/***Características de las imágenes*/
.grid img{
	width: 100% !important;
    height: 100% !important;
    object-fit: cover; 
    filter:grayscale(100%) opacity(85%);
}

/***Al pasar el cursor por encima de la imagen*/
.grid a:hover > img {
	filter:grayscale(0%) opacity(100%) ;
}

/***Título del proyecto*/
.grid p {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Canela-Thin';
    font-size: 5vw;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin:0px;
    width: 100%;
    height: 100%;
    justify-content: center;
    display: none !important;
    justify-content: center;
    align-items: center;
}

/***Título del proyecto al pasar por encima*/
.grid a:hover > p {
	display: flex !important;
}

/***AJUSTE EN PANTALLA MÓVIL DE MENU***/
@media only screen and (max-width : 768px) {
    
    /***Contenedor de la página*/
    .home-grid{
        margin: 80px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    
    /***Contenedor de cada proyecto*/
    .grid{
        position: relative;
        margin-bottom: 5px;
        cursor: pointer;
    }
    
    .grid a{
        width: 100vw;
        height: 100vh;
    }

    /***Características de las imágenes*/
    .grid img{
        filter:grayscale(95%) opacity(90%);
    }

    /***Al pasar el cursor por encima de la imagen*/
    .grid a:hover > img {
	   filter:grayscale(0%) opacity(100%) ;
    }

    /***Título del proyecto*/
    .grid p {
        color: rgba(255, 255, 255, 0.80);
        font-family: 'Canela-Thin';
        font-size: 4vw; 
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 0px;
        margin:0px;
        width: 100%;
        height: 100%;
        justify-content: center;
        justify-content: center;
        align-items: center;
    }

    /***Título del proyecto al pasar por encima*/
    .grid a:hover > p {
    }
}


/************************************************/
/************************************************/
/************************************************/
/***MENU***/

/***Pagina menu del about: overlay*/
.page-menu-overlay {
    float: left;
    width: 30%;
    margin: 0px 0px 0px 0px;
    padding: 0px 100px 0px 150px;
}

/***Página del menu*/
.page-menu {
    position: fixed;
    float: left;
    width: 30%;
    margin: 0px 0px 0px 0px;
    padding: 0px 100px 0px 150px;
}

/***Contenedor de la firma*/
.signature-menu{
    top:0;
    height: 50px;
    width: 100%;
    margin: 20px 0px 0px 0px;
}

/***Altura de la imagen de la firma*/
.signature-image{
	height: 100%;
}

/***Texto Commisions, Personal, About*/
.link-menu a{
	font-family: 'Canela-regular';
    font-size: 25px;
}

/***Contenedor de cada seccion*/
.section-menu {
    margin: 0px;
    padding: 0px 0px 10px 0px;
}

/***Texto biografía*/
.section-menu p{
    font-family: 'Canela-thin';
    font-size: 25px;
    display: inherit;
    text-align: justify;
    text-justify: initial;
    color: rgba(60, 60, 60, 1);    
}

/***Contenedor lista de proyectos*/
.section-menu ul {
	list-style: none;
    padding: 0px 0px 0px 0px;
}

/***Texto lista de proyectos*/
.section-menu li{
    font-family: 'Canela-thin';
    font-size: 25px;
}

/***Textos con cursiva*/
.italic{
	font-family: 'Canela-thin-italic';
}

/***Textos con enlaces en toda la pagina*/
.page-menu a{
    color: rgba(60, 60, 60, 1);
}

/***Textos con enlaces al pasar por encima*/
.page-menu a:hover{
    color: rgba(0, 0, 250, 1);
}

/***AJUSTE EN PANTALLA MÓVIL DE MENU***/
@media only screen and (max-width : 768px) {
    
    /***Contenedor de toda la página del menu*/
    .page-menu {
        position: fixed;
        float: left;
        width: 100%;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    
    /***Contenedor de la firma*/
    .signature-menu{
        position: absolute;
        left:0;
        height: 50px;
        width: 100%;
        margin: 10px 10px 10px 10px;
    }
    
    /***Altura de la imagen de la firma*/
    .signature-image{
        height: 80%;
    }
    
    /***Contenedor del menú*/
    .content-menu{
        display: none;
    }
}

/***AJUSTE EN PANTALLA ORDENADOR HASTA 1850PX***/
@media only screen and (min-width: 1024px) and (max-width : 1919px) {
  
    /***Página del menu del about*/
    .page-menu-overlay {
        padding: 0px 60px 0px 100px;
    }
    
    /***Página del menu*/
    .page-menu {
        padding: 0px 60px 0px 100px;
    }
    
     /***Texto Films, Stills, About*/
    .link-menu a{
        font-size: 20px;
    }
    
    /***Contenedor de cada seccion*/
    .section-menu {
        margin: 0px;
        padding: 0px 0px 20px 0px;
    }
    
    /***Texto biografía*/
    .section-menu p{
        font-size: 20px;
    }
    
    /***Texto lista de proyectos*/
    .section-menu li{
        font-size: 20px;
    }
}

/***AJUSTE EN PANTALLA ORDENADOR MINIMO 3840PX*/
@media only screen and (min-width : 3400px) {
    
    /***Página del menu del about*/
    .page-menu-overlay {
        padding: 0px 200px 0px 300px;
    }
    
    /***Página del menu*/
    .page-menu {
        padding: 0px 200px 0px 300px;
    }
    
    /***Contenedor de la firma*/
    .signature-menu{
        height: 80px;
        margin: 20px 0px 0px 0px;
    }
    
    /***Texto Films, Stills, About*/
    .link-menu a{
        font-size: 30px;
    }
    
    /***Contenedor de cada seccion*/
    .section-menu {
       padding: 0px 0px 20px 0px;
    }
    
    /***Texto biografía*/
    .section-menu p{
        font-size: 30px;
    }
    
    /***Texto lista de proyectos*/
    .section-menu li{
        font-size: 30px;
    }
}


/************************************************/
/************************************************/
/************************************************/
/***PROYECTO***/

/***Contenedor de toda la página*/
.page-project{
    padding: 50px 150px 0px 0px;
}

/***Contenedor del título del proyecto*/
.container-title{
    display: inline-block;
    padding: 50px 0px 50px 0px;
}

/***Título proyecto*/
.title-project{
    width:33%;
    float:left;
    padding: 0px 30px 0px 0px;
}

/***Texto título proyecto*/
.title-project p{
    margin: 0px 0px 0px 0px;
    font-family: 'Canela-thin';
    font-size: 60px;
    color: rgba(60, 60, 60, 1);
    line-height: 60px;
}

/***Contenedor texto del proyecto*/
.text-project {
    width: 66%;
    float:left;
    padding: 1px 0px 0px 0px;
}

/***Texto del proyecto*/
.text-project p{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    font-family: 'Grotesque-light';
    font-size: 25px;
    color: rgba(60, 60, 60, 1);
    text-align: justify;
    text-justify: initial;
}

/***Contenedor texto del proceso*/
.text-process {
    padding: 50px 0px 50px 0px;
}

/***Texto del proceso*/
.text-process p{
    margin: 0px 0px 0px 0px;
	font-family: 'Canela-thin';
    font-size: 50px; 
    color: rgba(60, 60, 60, 1);
    text-align: justify;
    text-justify: initial;
}

/***Contenedor de las imágenes del proyecto*/
.image-project{
	width: 100%;
}

/***Contenedor de los créditos*/
.credits-project{
    display: inline-block;
    width: 100%;
    margin: 50px 0px 50px 0px;
}

/***Columna créditos del proyecto*/
.column-project{
    box-sizing: border-box;
    width: 33%; 
    float: left;
    padding: 0px 25px 0px 0px;
}

/***Título información del proyecto*/
.title{
	font-family: 'Grotesque-light'; 
    font-size: 15px;
    color: rgba(60, 60, 60, 1);
}

/***Texto créditos del proyecto*/
.column-project p{
    margin: 0px 0px 0px 0px;
    font-family: 'Grotesque-light';
    font-size: 15px;
    color: rgba(0, 0, 0, .5);
}

/***Contenedor pie de proyecto*/
.footer-project{
    padding: 0px 0px 100px 0px;
}

/***Texto pie de proyecto*/
.footer-project p{
    margin: 0px 0px 0px 0px;
    font-family: 'Canela-thin';
    font-size: 30px;
    color: rgba(0, 0, 255, 1);
    text-align: right; 
}

/***Ajuste margen video meta-kids*/
.video-meta-kids{
    margin-top:-5vw;
    margin-bottom: -5vw;
}


/***AJUSTE EN PANTALLA MÓVIL DE PROYECTOS*/
@media only screen and (max-width : 768px) {
   
    /***Contenedor de toda la página*/
    .page-project{
        position: relative;
        top:60px;
        margin: 0px 40px 30px 40px;
        padding: 0px 0px 0px 0px;
    }
    
    /***Contenedor imagen título del proyecto*/
    .image-title{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    
    /***Contenedor del título del proyecto*/
    .container-title{
        display: inline-block;
        padding: 25px 0px 25px 0px;
    }
    
    /***Título proyecto*/
    .title-project{
        width:100%;
        float:left;
        padding: 0px 0px 20px 0px;
    }
    
    /***Texto título proyecto*/
    .title-project p{
        margin: 0px 0px 0px 0px;
        font-size: 40px;
        line-height: 40px;
    }
    
    /***Contenedor texto del proyecto*/
    .text-project {
        width: 100%;
        float:left;
        padding: 0px 0px 0px 0px;
    }
    
    /***Texto del proyecto*/
    .text-project p{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 10px 0px; 
        font-size: 20px;
        text-align: justify;
    }

    /***Contenedor texto del proceso*/
    .text-process {
        padding: 20px 0px 20px 0px;
    }
    
    /***Texto del proceso*/
    .text-process p{
        margin: 0px 0px 0px 0px;
        font-size: 22px; 
    }
    
    /***Contenedor de los créditos*/
    .credits-project{
        display: inline-block;
        width: 100%;
        margin: 40px 0px 40px 0px;
    }

    /***Columna créditos del proyecto*/
    .column-project{
        width: 100%;
        float: left;
        padding: 0px 0px 0px 0px;
    }

    /***Texto créditos del proyecto*/
    .column-project p{
        font-size: 15px; 
    }
    
    /***Contenedor pie de proyecto*/
    .footer-project{
        padding: 0px 0px 80px 0px;
    }
    
    /***Texto pie de proyecto*/
    .footer-project p{
        margin: 0px 0px 0px 0px;
    }
    
    /***Texto pie de proyecto*/
    .footer-project a{
        font-size: 20px;
    }
      
    /***Ajuste margen video meta-kids*/
    .video-meta-kids{
        margin-top: 120px;
        margin-bottom: -10px;
    }
}

/***AJUSTE EN PANTALLA ORDENADOR HASTA 1850PX*/
@media only screen and (min-width: 1024px) and (max-width : 1919px) {
    
    /***Contenedor de toda la página*/
    .page-project{
       padding: 50px 100px 0px 0px;
    }

    /***Texto título página*/
    .title-project p{
        font-size: 40px;
    }
    
    /*** Texto del proyecto*/
    .text-project p{
        font-size: 20px;
    }
    
    /***Texto del proceso*/
    .text-process p{
        font-size: 32px;
    }
    
    /***Título información del proyecto*/
    .title{
        font-size: 14px;
    }

    /***Texto créditos del proyecto*/
    .column-project p{
        font-size: 14px;
    }
    
    /***Texto pie de proyecto*/
    .footer-project p{
        font-size: 24px;
    }
}

/***AJUSTE EN PANTALLA ORDENADOR MINIMO 3840PX*/
@media only screen and (min-width : 3400px) {
    
    /***Contenedor del título del proyecto*/
    .container-title{
        padding: 100px 0px 100px 0px;
    }
   
    /***Texto título proyecto*/
    .title-project p{
       font-size: 60px;
    }
    
    /*** Texto del proyecto*/
    .text-project p{
       font-size: 30px;
    }
    
    /***Texto del proceso*/
    .text-process p{
        font-size: 40px; 
    }
       
    /***Título información del proyecto*/
    .title{
       font-size: 20px;
    }
    
    /***Contenedor de los créditos*/
    .credits-project{
        margin: 100px 0px 100px 0px;
    }

    /***Texto créditos del proyecto*/
    .column-project p{
        font-size: 20px;
    }

    /***Texto pie de proyecto*/
    .footer-project p{
        font-size: 32px;
    }
}


/************************************************/
/************************************************/
/************************************************/
/***ABOUT*/

/***Contenedor que sólo se visualiza en el móvil*/
.display-mobile{
    display: none;
}

/***Contenedor de página del about*/
.page-xdxd{
    padding: 50px 150px 0px 0px;
}

/***Contenedor del about*/
.container-about{
    display: inline-block;
    padding: 50px 0px 50px 0px;
}

/***Contenedor servicios*/
.column-about-left{
    width:25%;
    float:left;
    padding: 0px 100px 0px 0px;
}

/***Contenedor de cada sección*/
.section-about{
    padding: 0px 0px 50px 0px;
}

/***Texto título de servicios*/
.title-about {
	font-family: 'Canela-thin'; 
    font-size: 25px;
    color: rgba(60, 60, 60, 1);
}

/***Texto servicios*/
.section-about p{
    margin: 0px 0px 0px 0px;
    font-family: 'Grotesque-light';
    font-size: 18px;
    text-align: left;
    color: rgba(60, 60, 60, 1);
    word-wrap: normal;
}

/***Learning*/
.little{
    font-family: 'Canela-Thin';
	font-size: 12px;
}

/***Contenedor bio*/
.column-about-right {
    width: 75%;
    float:left;
    padding: 1px 0px 0px 0px;
}

/***Texto bio*/
.column-about-right p{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px;
    font-family: 'Canela-thin';
    font-size: 44px;
    color: rgba(60, 60, 60, 1);
    text-align: justify;
    text-justify: initial;
}

/***Texto Commisions, Personal, About*/
.link-menu-overlay a{
	font-family: 'Canela-regular';
    font-size: 25px;
}

/***Imagen de Pablo*/
.pablo-image{
    padding: 20px 0px 20px 0px;
	width: 75%;
}

/***Texto de contacto*/
.contact-about p{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 1px 0px;
    font-family: 'Grotesque-light';
    font-size: 18px;
    color: rgba(60, 60, 60, 1);
    display: inherit;
    text-align: justify;
    text-justify: initial;

}

/***Texto social media*/
.media-about{
    padding: 20px 0px 20px 0px;
}

/***Texto social media*/
.media-about p{
    font-family: 'Canela-thin';
    font-size: 25px;
    color: rgba(60, 60, 60, 1);
}

/***Texto social media*/
.media-about a{
    font-family: 'Canela-thin';
    font-size: 25px;
    color: rgba(60, 60, 60, 1);
}

/***Contenedor créditos diseño web*/
.footer-code{
    margin: 0px 0px 0px 0px;
    padding: 25vh 0px 0px 0px;
}

/***Texto créditos diseño web*/
.footer-code p{
	font-family: 'Grotesque-regular';
    font-size: 12px;
    color: rgba(0, 0, 0, .5);
}


/***AJUSTE EN PANTALLA MÓVIL DE ABOUT*/
@media only screen and (max-width : 768px) {
    .page-xdxd{
        position: relative;
        top:60px;
        margin: 0px 40px 30px 40px;
        padding: 0px 0px 0px 0px;
    }
    
    /***No visualizar el menu*/
    .display-about{
       display: none;
    }
   
    /***Visualizar datos de contacto*/
   .display-mobile{
	   display: inherit;
       padding: 30px 0px 0px 0px;
    }
    
    .contact-mobile p{
       margin: 0px 0px 0px 0px;
       padding: 0px 0px 1px 0px;
       font-family: 'Grotesque-light';
       color: rgba(60, 60, 60, 1);
       font-size: 14px;
    }
    
    .media-mobile{
    }
    
    .media-mobile p{
	   font-family: 'Canela-thin';
       color: rgba(60, 60, 60, 1);
       font-size: 20px;
    }
    
    .media-mobile a{
	   font-family: 'Canela-thin';
       color: rgba(60, 60, 60, 1);
       font-size: 20px;
    }
    
   .container-about{
       display: flex;
       flex-direction: column-reverse;
       margin: 0px 0px 0px 0px;
       padding: 0px 0px 0px 0px;
    }
    
   .column-about-left{
       width:100%;
       padding: 30px 0px 0px 0px;
    }
       
   .column-about-right {
       width: 100%;
       padding: 0px 0px 0px 0px;
    }
    
    .title-about{
       font-size: 20px;
    }
    
    .section-about p{
       font-size: 14px;
    }
    
   .column-about-right p{
       margin: 0px 0px 0px 0px;
       padding: 0px 0px 10px 0px;
       font-size: 20px;
    }
}

/***AJUSTE EN PANTALLA ORDENADOR HASTA 1850PX*/
@media only screen  and (min-width: 1024px) and  (max-width : 1919px) {    
    .page-xdxd{
       position: relative;
       padding: 50px 100px 0px 0px;
    }

    .column-about-left{
       padding: 0px 50px 0px 0px;
    }
    
    .title-about{
       font-size: 26px;
    }
    
    .section-about p{
       font-size: 16px;
    }
    
    .column-about-right p{
       font-size: 40px;
    }
    
    .display-about p{
       font-size: 16px;
    }
    
    .media-about a{
       font-size: 22px;
    }
    
    .footer-code p{
       font-size: 11px;
    }
}

/***AJUSTE EN PANTALLA ORDENADOR MINIMO 3840PX*/
@media only screen and (min-width : 3400px) {    
    .title-about{
       font-size: 40px;
    }
    
    .section-about p{
       font-size: 18px;
    }
    
    .column-about-right p{
       font-size: 60px;
    }
    
    .contact-about p{
       font-size: 18px;
    }
    
    .media-about a{
       font-size: 30px;
    }
    
    .footer-code p{
       font-size: 20px;
    }
}







/***Contenedor de toda la página
.page-about{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    xheight: 100vh;
}*/

/***Contenedor de la firma
.signature-about-image{
    height:50px;
    width: 100%;
    margin: 20px 0px 0px 0px;
    padding: 0px 0px 0px 150px;
}*/

/***Altura de la imagen de la firma
.signature-image-a{
	height: 100%;
}*/

/***Contenedor de las tres columnas
.content-about{
    display: flex;
}*/

/***Sección 1: columna izquierda
.left-about{
    width:18%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 150px;
}*/

/***Sección 2: columna centro
.center-about{
    width:26%;
    margin: 0px 0px 0px 0px;
    padding: 70px 200px 0px 200px;
}*/

/***Sección 3: columna derecha
.right-about{
    width: 56%;
    margin: 0px 0px 0px 0px;
    padding: 70px 150px 0px 0px;
}*/

/***Texto Films, Stills, About
.link-about a{
    font-family: 'Canela-regular';
    font-size: 25px;
    color: rgba(60, 60, 60, 1);
}*/

/***Imagen Pablo
.image-pablo{
	width: 95%;
    padding-top: 10px;
}*/

/***Contenedor Contacto
.contact-about{
    padding: 40px 0px 0px 0px;
}*/

/***Texto Contacto
.contact-about p{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 1px 0px;
    font-family: 'Grotesque-light';
    font-size: 18px;
    color: rgba(60, 60, 60, 1);
    display: inherit;
    text-align: justify;
    text-justify: initial;
}*/

/***Texto email
.email{
	font-family: 'Grotesque-light';
    font-size: 20px;
}*/

/***Texto Instagram, Behance, Linkedin
.social-media a{
    font-family: 'Canela-thin';
    font-size: 25px;
    color: rgba(0, 0, 0, 0.5);
}*/

/***Texto bio Pablo
.right-about p{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 20px 0px; 
    font-family: 'Canela-thin';
    font-size: 50px;
    color: rgba(60, 60, 60, 1);
    text-align: justify;
    text-justify: initial;
}*/

/***Textos con enlaces en toda la pagina
.page-about a{
    color: rgba(60, 60, 60, 1);
}*/

/***Textos con enlaces al pasar por encima
.page-about a:hover{
    color: rgba(0, 0, 250, 1);
}*/

/***Contenedor de cada sección
.section-about{
    padding: 0px 0px 50px 0px;
}*/

/***Texto Contact, Studios, Brands, Services, Softwate
.title-about{
	font-family: 'Canela-thin'; 
    font-size: 29px;
    color: rgba(60, 60, 60, 1);
}*/

/***Texto créditos del proyecto
.section-about p{
    margin: 0px 0px 0px 0px;
    font-family: 'Grotesque-light';
    font-size: 18px;
    text-align: left;
    color: rgba(60, 60, 60, 1);
    word-wrap: normal;
}*/

/***Learning
.little{
    font-family: 'Canela-Thin';
	font-size: 12px;
}*/

/***Contenedor contact for booking
.contact-booking-about{
    padding: 100px 150px 0px 0px;
    margin: 0px 0px 0px 0px;
}*/

/***Texto contact for booking
.contact-booking-about p{
    text-align: right;  
}

.contact-booking-about a{
    font-family: 'Canela-thin';
    font-size: 30px;
    color: rgba(0, 0, 255, 1);
}*/

/***Contenedor del pie de página
.footer-about{
    margin: 0px 0px 0px 0px;
    padding: 50px 150px 0px 150px;
}*/

/***Texto pie de página
.footer-about p{
	font-family: 'Grotesque-regular';
    font-size: 15px; 
    color: rgba(0, 0, 0, .5);
    display: inherit;
}*/

/***AJUSTE EN PANTALLA MÓVIL DE ABOUT*/
@media only screen and (max-width : 768px) {
    
    /***Contenedor de toda la página
    .page-about{
        float: left;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        xheight: auto;
    }
    
    .signature-about{
        position: relative;
        height: 50px;
        width: 100%;
        margin: 10px 10px 10px 10px;
    }*/
      
    /***Altura de la imagen de la firma
    .signature-image-a{
        height: 80%;
        position: absolute;
        top:0;
        left:0;
    }*/

    /***Contenedor de las tres columnas
    .content-about{
        display: flex;
        flex-direction: column-reverse;
        margin: 10px 40px 30px 40px;
        padding: 0px 0px 0px 0px;
    }*/
    
    /***Sección 1: columna izquierda
    .left-about{
        width:100%;
        padding: 0px 0px 0px 0px;
    }*/
    
    /***Sección 2: columna centro
    .center-about{
        width:100%;
        padding: 40px 0px 30px 0px;
    }*/
    
    /***Sección 3: columna derecha
    .right-about{
        width: 100%;
        padding: 0px 0px 0px 0px;
    }
    .link-about{
        display:none;
    }*/
       
    /***Imagen Pablo
    .image-pablo{
        display: none;
    }*/
    
    /***Contenedor Contacto
    .contact-about{
        padding: 0px 0px 30px 0px;
    }*/
    
    /***Texto Contacto
    .contact-about p{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 1px 0px;
        font-size: 14px;
    }*/
    
    /***Texto email
    .email{
        font-size: 20px;
    }*/
    
    /***Texto Instagram, Behance, Linkedin
    .social-media p{
        font-size: 20px;
    }*/
    
    /***Texto Instagram, Behance, Linkedin
    .social-media a{
        font-size: 20px;
    }*/
    
    /***Texto bio Pablo
    .right-about p{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 10px 0px;
    font-size: 20px;
    }*/
    
    /***Textos con enlaces en toda la pagina
    .page-about a{
    }*/
    
    /***Textos con enlaces al pasar por encima
    .page-about a:hover{
    }*/
    
    /***Contenedor de cada sección
    .section-about{
        padding: 0px 0px 10px 0px;
    }*/
    
    /***Texto Contact, Studios, Brands, Services, Softwate
    .title-about{
        font-size: 20px;
    }*/
    
    /***Texto créditos del proyecto
    .section-about p{
        margin: 0px 0px 0px 0px;
        font-size: 14px;
    }*/
    
    /***Learning
    .little{
        font-size: 12px;
    }*/
    
    /***Contenedor contact for booking
    .contact-booking-about{
        padding: 0px 40px 0px 0px;
    }*/
    
    /***Texto contact for booking
    .contact-booking-about p{
        text-align: right; 
    }
    
    .contact-booking-about a{
        font-size: 18px;
    }*/
    
    /***Contenedor del pie de página
    .footer-about{
        padding: 40px 0px 0px 40px;
    }*/
    
    /***Texto pie de página
    .footer-about p{
        font-size: 11px; 
    }*/
}

/***AJUSTE EN PANTALLA ORDENADOR HASTA 1850PX*/
@media only screen  and (min-width: 1024px) and  (max-width : 1919px) {
    
    .page-about{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        width: 100%;
        xheight: 100vh;
    }
    
    /***Contenedor de la firma*/
    .signature-about{
        position: relative;
        height:50px;
        width: 100%;
        margin: 0px 0px 0px 150px;
    }
    
       /***Altura de la imagen de la firma*/
    .signature-image-a{
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
   
    /***Sección 1: columna izquierda*/
    .left-about{
        width:22%;
        padding: 0px 0px 0px 150px;
    }
    
    /***Sección 2: columna centro*/
    .center-about{
        width:22%;
        padding: 45px 100px 0px 100px;
    }
    
    /***Sección 3: columna derecha*/
    .right-about{
        width: 56%;
        padding: 45px 150px 0px 0px;
    }
    
    /***Texto Commisions, Personal, About*/
    .link-about a{
        font-size: 20px;
    }
    
    /***Imagen Pablo*/
    .image-pablo{
        width: 90%;
        padding-top: 10px;
    }
    
    /***Contenedor Contacto*/
    .contact-about{
        padding: 40px 0px 20px 0px;
    }
    
    /***Texto Contacto*/
    .contact-about p{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 1px 0px;
        font-size: 18px;
    }
    /***Texto email*/
    .email{
        font-size: 18px;
    }
    
    /***Texto Instagram, Behance, Linkedin*/
    .social-media a{
        font-size: 22px;
    }
    
    /***Texto bio Pablo*/
    .right-about p{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 30px 0px; /*distancia entre párrafos*/
        font-size: 40px;
    }
    
    /***Contenedor de cada sección*/
    .section-about{
        padding: 0px 0px 40px 0px;
    }
    
    /***Texto Contact, Studios, Brands, Services, Softwate*/
    .title-about{
        font-size: 26px;
    }
    
    /***Texto créditos del proyecto*/
    .section-about p{
        margin: 0px 0px 0px 0px;
        font-size: 16px;
    }
    
    /***Learning*/
    .little{
        font-size: 12px;
    }
    
    /***Contenedor contact for booking*/
    .contact-booking-about{
        padding: 150px 150px 0px 0px;
    }
    
    /***Texto contact for booking*/
    .contact-booking p{
        text-align: right; /*alineación texto centrada*/
    }
    
    .contact-booking-about a{
        font-size: 24px;
    }
    
    /***Contenedor del pie de página*/
    .footer-about{
        padding: 0px 150px 0px 150px;
    }
       
    /***Texto pie de página*/
    .footer-about p{
        font-size: 11px; /*tamaño fuente*/
    }
}

/***AJUSTE EN PANTALLA ORDENADOR MINIMO 3840PX*/
@media only screen and (min-width : 3400px) {  
   
    /***Contenedor de toda la página*/
    .page-about{
        margin: 0px 0px 0px 0px;
        padding: 0px 150px 0px 150px;
        width: 100%;
        xheight: 100vh;
    }
    
    /***Contenedor de la firma*/
    .signature-about{
        position: relative;
        height:80px;
        width: 100%;
        margin: 0px 0px 0px 150px;
        padding: 0px 0px 0px 0px;
    }
    
       /***Altura de la imagen de la firma*/
    .signature-image-a{
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
    
    /***Sección 1: columna izquierda*/
    .left-about{
        width:14%;
        margin: 0px 0px 0px 150px;
        padding: 0px 0px 0px 0px;
    }

    /***Sección 2: columna centro*/
    .center-about{
        width:26%;
        padding: 80px 220px 0px 220px;
    }

    /***Sección 3: columna derecha*/
    .right-about{
        width:60%;
        padding: 80px 150px 0px 0px;
    }

    /***Texto Films, Stills, About*/
    .link-about a{
        font-size: 30px;
    }

    /***Imagen Pablo*/
    .image-pablo{
        padding-top: 20px;
        width:87%;
    }

    /***Contenedor Contacto*/
    .contact-about{
        padding: 50px 0px 0px 0px;
    }

    /***Texto Contacto*/
    .contact-about p{
        padding: 0px 0px 2px 0px;
        font-size: 20px;
    }

    /***Texto email*/
    .email{
       font-size: 20px;
    }

    /***Texto Instagram, Behance, Linkedin*/
    .social-media a{
       font-size: 30px;
    }

    /***Texto bio Pablo*/
    .right-about p{
       padding: 0px 0px 40px 0px; /*distancia entre párrafos*/
       font-size: 60px;
    }

    /***Contenedor de cada sección*/
    .section-about{
       padding: 0px 0px 100px 0px;
    }

    /***Texto Contact, Studios, Brands, Services, Softwate*/
    .title-about{
       font-size: 40px;
    }

    /***Texto créditos del proyecto*/
    .section-about p{
        font-size: 18px;
    }

    /***Learning*/
    .little{
        font-size: 18px;
    }
    
        /***Contenedor contact for booking*/
    .contact-booking-about{
        padding: 100px 150px 150px 0px;
    }
    
    /***Texto contact for booking*/
    .contact-booking p{
        text-align: right; /*alineación texto centrada*/
    }
    
    .contact-booking-about a{
        font-size: 35px;
    }
    
    /***Contenedor del pie de página*/
    .footer-about{
        padding: 300px 0px 0px 0px;
    }
       
    /***Texto pie de página*/
    .footer-about p{
        font-size: 20px; /*tamaño fuente*/
    }
}



/************************************************/
/************************************************/
/************************************************/
/***STILLS/

/***Contenedor de toda la página*/
.page-stills{
    padding-top: 5vw;
    padding-right: 8vw; /*margen derecho*/
}

/***Contenedor pie de proyecto*/
.footer-stills{
    padding: 0px 0px 100px 0px;
}

/***Texto pie de proyecto*/
.footer-stills p{
    margin: 0px 0px 0px 0px;
    font-family: 'Canela-thin';
    font-size: 30px;
    color: rgba(0, 0, 255, 1);
    text-align: right; /*alineación texto centrada*/
}


/***AJUSTE EN PANTALLA MÓVIL DE PROYECTOS*/
@media only screen and (max-width : 768px) {
    
    .page-stills{
        margin: 60px 40px 0px 40px;
        padding: 0px 0px 0px 0px;
    }
    
    /***Contenedor pie de proyecto*/
    .footer-stills{
        padding: 40px 0px 80px 0px;
    }
    
    /***Texto pie de proyecto*/
    .footer-stills p{
        margin: 0px 0px 0px 0px;
        font-size: 20px;
    }
}

/***AJUSTE EN PANTALLA ORDENADOR HASTA 1850PX*/
@media only screen and (min-width: 1024px) and (max-width : 1919px) {
    
    /***Contenedor pie de proyecto*/
    .footer-stills {
        margin:0px 0px 0px 0px;
        padding: 80px 0px 100px 0px;
    }
    
    /***Texto pie de proyecto*/
    .footer-stills p{
        font-size: 24px;
    }
}

/***AJUSTE EN PANTALLA ORDENADOR MINIMO 3840PX*/
@media only screen and (min-width : 3400px) {
    
     /***Contenedor pie de proyecto*/
    .footer-stills {
        padding: 150px 0px 100px 0px;
    }
}




/************************************************/
/************************************************/
/************************************************/
/***PÁGINA GRID STILLS*/

.Art_grid {	
  	padding-top: 10vw;
	padding-bottom: 10vw;
    padding-right: 10vw; /*margen derecho*/
	display: grid;
    grid-template-columns: 1fr 1fr ;
    gap: 25px;
}

.Art_grid img {
	width: 100%!important;
    height: calc(100% + 2px)!important;  
    object-fit: cover; 
}

.custom-img {   
	filter: grayscale(100%) opacity(90%);
}

.custom-img:hover {
	filter: grayscale(0%) opacity(100%);
}

/***AJUSTE EN PANTALLA MÓVIL DE PROYECTOS*/
@media only screen and (max-width : 768px) {

    .Art_grid {	
	    margin-top: 50px;
        padding-left: 10px;
        margin-right: 25px;
        display: grid;
        grid-template-columns: 1fr ;
        gap: 40px;
    }
    
    .Art_grid img {
    }

    .custom-img {   
	    filter: grayscale(0%) opacity(100%);
    }
}



/************************************************/
/************************************************/
/************************************************/
/***PÁGINA DEL MENÚ EN PANTALLA MÓVIL*/
@media only screen and (max-width : 480px) {
    
    /***Contenedor de la página*/
    .menu-mobile{
        width: 100%;
        height: 100%;
        margin: 0px 0px 0px 0px;
        padding: 0px 40px 0px 0px;
    }
    
    /***Contenedor de la firma*/
    .signature-menu-mobile{
        top:0;
        height:20px;
        width: 50%;
        margin: 0px 0px 0px 10px;
    }

    /***Firma*/
    .signature-link-mobile{
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
	    width: 35%;
    }
    
     /***Texto enlaces Commisions,Personal,About*/
    .section-menu-mobile p{
        font-family: 'Canela-Thin';
        font-size: 25px; /*tamaño fuente*/
        line-height: 25px;
        text-align: right;
        text-justify: initial;
    }
    
    .section-menu-mobile a{
	    color: #3c3c3c;
        cursor:pointer;
    }
    
     /***Texto enlaces a cada proyecto*/
    .projects-menu-mobile ul{
        padding-left: 0px;
        list-style: none;
        font-family: 'Canela-Thin';
        font-size: 25px; /*tamaño fuente*/
        line-height: 25px;
        text-align: right;
        text-justify: initial;
    }
    
     .projects-menu-mobile a{
        color: rgba(0, 0, 0, .5);
        cursor:pointer;
    }
}

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


#toolset {
	display: none;
}

body {
}

a:active {
}

.page a.active {
}

i,
em {
}

b,
strong {
}

sub,
sup {
}

sub {
}

sup {
}

s {
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
}

blockquote {
	margin: 0;
	padding: 0 0 0 1em;
}

hr {
	background: rgba(255, 255, 255, 0.6);
	border: 0;
	height: 2px;
	display: block;
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
}

.content img {
	float: none;
	margin-bottom: 0;
    vertical-align: bottom;
}

[image-gallery="slideshow"] {
    margin-top:2rem;
    margin-bottom: 2rem;
    width: auto;
    height: 100%;
}

/***IMAGE CAPTION AQUI*/
.gallery_image_caption {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.3);
	font-family: 'Grotesque-medium';
	font-style: normal;
	line-height: 2;	
}

/***Loading Animation*/
.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/***Editor styles*/
[data-predefined-style="true"] bodycopy {
}

[data-predefined-style="true"] bodycopy a {
text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {
}

xbodycopy a.image-link,
xbodycopy a.icon-link,
xbodycopy a.image-link:hover,
xbodycopy a.icon-link:hover {
}

[data-predefined-style="true"] h1 {
}

[data-predefined-style="true"] h1 a {
}

[data-predefined-style="true"] h2 {
}

[data-predefined-style="true"] h2 a {
}

[data-predefined-style="true"] small {
}

[data-predefined-style="true"] small a {
}

/*** Breakpoints*/
[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
}

[data-css-preset] body {
	background-color: rgb(241, 241, 241)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 60%/*!content_right*/;
}

[data-css-preset] .content_padding {
}

/*** Thumbnails*/
div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: transparent/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 60%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0.75rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -1.5rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.5rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1.0rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: .8rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.6);
	font-family: "Monument Grotesk Mono", Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: -1.8rem;
}


/*** Site Menu Button*/

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 30px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
	right: 2rem /*!site_menu_button*/;
	top: 2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -10px;
    font-size: 32px;
}

#site_menu_button.custom_icon {
	width: 40px;
    height: auto;
}

#site_menu_button.active {
	display: none;
}


/*** Site Menu*/
#site_menu {
	font-family: 'Canela-thin';
    background: rgba(244, 244, 244, 1);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
    color: #3c3c3c;}

#site_menu .page-link a:hover {
    color: #2100ff;}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: 1;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/** Shop Button*/

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 1rem /*!shop_button*/;
	left: 1.5rem /*!shop_button*/;
}

#shop_button.text {
    font-size: 1.6rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
	font-family: Diatype, Icons;
    padding: 0;
    line-height: 1.3;
	font-style: normal;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 40px;
}

/** Shop Product Widget*/

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: Diatype, Icons;
	font-size: 1.6rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.75);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .dropdown {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.3rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.4;
    padding: .7rem 2.5rem 0.6rem 1rem;
	font-style: normal;
	font-weight: 400;
    color: rgba(0, 0, 0, 0.75);
}

.shop_product .button {
	font-family: Diatype, Icons;
	font-size: 1.3rem;
    background: rgba(0, 0, 0, 0.75);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem 0.8rem;
	font-style: normal;
	font-weight: 700;
}

/** Image Zoom*/

.content img.image-zoom:active {
  opacity: .7;
}

/*** Quick View*/

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: Diatype, Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
    line-height: 1.3;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.4);
    color: #000;
}

/*** Quick View Navigation */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

/*** Image Gallery Navigation Arrows */
 .image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 2px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 3px;
}

/*** Wallpaper Backdrop Navigation Arrows*/

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
    stroke-width: 2px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 3px;
}


/*** Feed*/

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}

/** Audio Player*/

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.4rem;
    line-height: 1.3;
	font-family: Diatype, Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 0.9rem;
    fill: rgba(255, 255, 255, 1);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

.rotate {
    display: inline-block;
    -webkit-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}