/*
Theme Name: Alicia Terres Theme
Theme URI: aliciaterres.com
Description: Tema para el proyecto Alicia Terres.
Author: Maria Lara
Author URI: maaarialara.com
Version: 1.0
*/

@import "fonts.css";

/* CSS RESET */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* my css */
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    font-size: 62, 5%;
}
  
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 13px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    font-style: normal;
}

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

.gradient {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 41%, rgba(255,255,255,0) 100%);
}

/* HOME */

body.home {
    overflow: hidden;
}

.home .wp-block-video {
    width: 100vw;
    height: 100vh;
}

.home .wp-block-video video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.home-title {
    position: absolute;
    color: white;
    padding: 1rem;
}

#floatingMenu {
    background-color: white;
    -webkit-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 99;
}

#floatingMenu nav {
    text-align: center;
    text-transform: uppercase;
    padding: 2rem 3rem;
    line-height: 2rem;
    font-size: 13px;
}

#floatingMenu .about-link {
    text-decoration: underline;
    text-transform: lowercase;
}


/* mobile only */
@media (max-width: 749px) {
    .home-desktop {
        display: none;
    }

    #floatingMenu nav {
        padding: 2rem;
        line-height: 1.5rem;
        font-size: 11px;
    }
}

/* desktop */
@media (min-width: 750px) {
    .home-mobile {
        display: none;
    }
}

/* sigle projects */

.single-header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    z-index: 9;
}

/* menu focus link */

.single-menu a {
    color:#C7C7C7;
    text-transform: uppercase;
}

body.postid-7 a.mgph {
    color: black;
}
body.postid-18 a.retrato {
    color: black;
}
body.postid-36 a.tv {
    color: black;
}
body.postid-38 a.rrss {
    color: black;
}
body.postid-40 a.cartel {
    color: black;
}

/* mobile only */
@media (max-width: 749px) {

    .single-header {
        font-size: 11px;
    }
    .single-menu {
        padding: 3rem 1rem 1rem;
        margin: 0;
    }

    .single-menu li {
        margin-bottom: 0.3rem;
    }

    .single-menu a {
        font-size: 11px;
    }

    figcaption.vimeo-create__video-caption {
        padding: 0.5rem 1rem;
    }
}
/* desktop */
@media (min-width: 750px) {

    .projects__section {
        width: 50vw;
        float: right;
        padding: 4rem 1rem;
    }

    .single-menu {
        padding: 4rem 1rem;
        margin: 0;
        position: fixed;
    }

    .single-menu li {
        margin-bottom: 0.5rem;
    }

    .single-menu a:hover {
        color: black;
    }

    .single-menu a {
        font-size: 13px;
    }

    figcaption.vimeo-create__video-caption {
        padding: 1rem 0;
    }
}


/* about */

body.page-id-12 {
    overflow: hidden;
    height: 100vh;
}

.about-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

/* drag and drop */

.draggable {
    cursor: grab;
    max-width: 200px;
    position: absolute;
    z-index: 9999;
    transition: transform 0.2s;
}

/* .draggable:hover {
    transform: translateX(-5px);
} Mueve la imagen hacia la izquierda */

.draggable:active {
    cursor: grabbing;
}

aside.links-about .wp-block-group__inner-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
}

/* mobile only */
@media (max-width: 749px) {

    .about-header {
        font-size: 11px;
    }

    .about__section {
        padding: 1rem;
    }
    
    /* .about__section p {
        font-size: 11px;
    } */

    .object4 {
        width: 130px;
        height: auto;
        left: 55%;
        bottom: 5%;
        z-index: 50;
    }

    .object7 {
        right: 35%;
        bottom: 3%;
        width: 170px;
    }

    .object5 {
        width: 150px;
        left: 10%;
        bottom: 40%;
    }

    .object1 {
        left: 50%;
        top: 15%;
        width: 55px;
    }

    .object3 {
        left: 30%;
        top: 24%;
        width: 45px;
    }

    .object2 {
        right: 45%;
        bottom: 33%;
        width: 80px;
    }

    .object6 {
        left: 15%;
        bottom: 30%;
        width: 50px;
    }

} 



/* desktop */
@media (min-width: 750px) {

    .about__section {
        display: flex;
        justify-content: space-between;
        width: 70vw;
        padding: 2rem 0;
    }

    .about__section p {
        font-size: 25px;
        padding: 0 1rem;
        padding-right: 5rem;
    }

    /* .about__section img {
        height: 80vh;
        width: 35vw;
        object-fit: cover;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -99;
    } */

    .object1 {
        left: 30%;
        bottom: 35%;
        width: 65px;
    }

    .object2 {
        left: 40%;
        top: 30%;
        width: 105px;
    }

    .object3 {
        left: 13%;
        top: 18%;
        width: 60px;
    }

    .object5 {
        left: 50%;
        bottom: 7%;
    }

    .object6 {
        right: 5%;
        top: 30%;
        width: 55px;
    }

    .object7 {
        right: 5%;
        bottom: 7%;
    }

    .object4 {
        width: 180px;
        height: auto;
        right: 13%; 
        bottom: 10%;
        z-index: 50;
    }
}