/*
Theme Name: Portfolio
Theme URI:
Author: Eva Hinojosa
Author URI: www.evamaquetacion.com
Description: Wordpress portfolio theme

*/


*{
    margin: 0;
    padding: 0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    box-sizing: border-box;

    /* aplica a todos los elementos del HTML */
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

.montserrat-alternates-medium {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 500;
  font-style: normal;
}
button a{
    text-decoration:none;
    color:inherit;
}
h1{
    font-size: 55pt;
    font-size:4vw;
    text-align:center;
    font-family: "Unbounded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color:white;
}
h2{
    font-size: 30pt;
    text-align:center;
    font-family: "Unbounded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color:white;
}
h3{
    font-size: 20pt;
    font-family: "Unbounded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color:white; 
}
p{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height:20pt;
    font-size: 15pt;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight:500;
    font-style:normal;
    color:white;
}
button{
    padding:10px;
    font-size:15px;
    width:200px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
    border:2px solid black;
    border-radius:5px;
    background-color:black;
    color:white;
    border: 1px solid white;


    transition: all .4s ease;
    text-transform: uppercase;
    text-align: center;
}
button:hover{
    padding:10px;
    font-size:15px;
    width:200px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
    border:1px solid rgb(208, 255, 0);
    background-color:rgb(208, 255, 0);
    color:black;
    border-radius:5px;
}
.button{
    padding:10px;
    font-size:15px;
    width:200px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
    border:2px solid black;
    border-radius:5px;
    background-color:black;
    color:white;
    border: 1px solid white;


    transition: all .4s ease;
    text-transform: uppercase;
    text-align: center;
}
.button:hover{
    padding:10px;
    font-size:15px;
    width:200px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
    border:1px solid rgb(208, 255, 0);
    background-color:rgb(208, 255, 0);
    color:black;
    border-radius:5px;
}
body{
    background:#131314;
    height:auto;
    position:relative;
}
.backgroundimage{
    background-image:url("imagenes/fondodesktop.png");
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
    background-repeat: none;
}

/* ---HEADER--- */
.header{
padding-top:50px;
position:fixed;
left:50%;
transform: translate(-50%, -50%);
top:30px;
}
#logoheader{
    height:30px;
    margin-left:20px;
}

#logoheadermobile{
    height:30px;
    margin-left:20px;
    display:none;
}

nav{
    width: 800px;
    padding: 0 15%;
    padding-top:50px;
    margin: auto;

    display: flex;
    align-items:center;
    justify-content:space-between;
    padding: 5px 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}


nav ul li{
    display:inline-block;
    list-style:none;
}
nav ul li a{
    text-decoration:none;
    margin:15px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height:20pt;
    font-size: 12pt;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight:700;
    font-style:normal;
    color:white;
}

nav a:hover{
color:rgb(208, 255, 0);
}
#headerbutton{
    background:black;
    color:white;
    border-radius:30px;
    border:none;
    padding:6px;
    font-size:12px;
    width:150px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
    
    transition: all .4s ease;
    text-transform: uppercase;
    text-align: center;
    margin-right:20px;
}
#headerbutton:hover{
    background:rgb(208, 255, 0);
    color:black;
    border-radius:30px;
    border:none;
    padding:6px;
    font-size:12px;
    width:150px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
}


/*HAMBURGER*/
.menu-toggle{
    display:none;
}
.hamburger{
    display:none;
    width:clamp(40px, 6vw, 45px);
    height:clamp(40px, 6vw, 45px);
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after {
    display:block;
    width:18px;
    height:2px;
    background:white;
    position:relative;
    content: "";
    transition: transform 0.25s ease, background 0.25s ease;
    transform-origin: center;
}

.hamburger span::before{
    position:absolute;
    top:6px;
}

.hamburger span::after{
    position:absolute;
    top: -6px;
}
/* ------HOOK----- */

.landing{
    width:100%;
    padding-bottom:150px;
    padding-top:200px;
}
.hook{
    width:100%;
    padding-bottom:75px;
    padding-top:150px;
}

.hookcontent{
    margin:auto;
    width:80%;
}
.hookcontent p{
    margin-top:20px;
    text-align:justify;
    hyphens:auto;
}
#hookbuttons button{
    margin-top:20px;
    width:350px;
    border:none;
}
#hookbuttons button:hover{
    width:350px;
    color:black;
    background-color:rgb(208, 255, 0);
}
#hookbuttons{
    display:flex;
    justify-content:center;
}
#hookbuttons .button{
    margin:20px;
}


/* ----CTA------ */
.cta{
    width:100%;
    padding-bottom:75px;
    padding-top:150px;
}

.ctacontent{
    margin:auto;
    width:50%;
}
.ctacontent p{
    margin-top:20px;
    text-align:center;
}
.ctabuttons button{
    margin-top:20px;
    width:200px;
}
.hook button:hover{
    width:200px;
}
#ctabuttons{
    display:flex;
    justify-content:center;
}
#ctabuttons .button{
    margin:20px;
}



/* FORMATOS */
.maquetacionformatos{
    width:60%;
    margin:auto;
    padding-bottom:75px;
    margin-top:75px;
}
.maquetacionformatos h2{
    margin-bottom:25px;
}
.formatos{
    width:27%;
    margin-top:25px;
    justify-content:center;
    text-align:center;
    margin-bottom:25px;
}
.formatos img{
    height: 50px;
}
.contenidoformatos{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
#maquetacionformatosboton{
display:flex;
justify-content:center;
margin-top:25px;

}

/* -----PRECIO------- */
.precio{
    width: 100%;
    padding-top:75px;
    padding-bottom:75px;
    background-color:rgb(208, 255, 0);
}
.preciocontent{
    display:flex;
    justify-content:space-around;
    align-items:center;
    width:55%;
        margin:auto;

}
.preciotexto{
    text-align:center;
}

.preciotexto h2{
    color:black;
}
.preciotexto p{
    margin-top:15px;
    color:black;
}
.precio img{
    height:125px;
    margin-left:20px;
    fill:black;
}
#preciobutton{
    display:flex;
    justify-content:center;
    margin-top:25px;
}
#preciobutton button{
    border:none;
}
#preciobutton :hover{
    background-color:white;
}

/* ----PROYECTOS---- */
.portfolio{
    padding-bottom:150px;
    margin-top:75px;
}
.imagenesportfolio{
display:flex;
margin:auto;
width:90%;
}

.img-responsive{
    width:33%;
    margin:auto;
}
.img-responsive img{
    width:100%;
    height:350px;
    object-fit:cover;
}

#portfoliobutton{
    display:flex;
    justify-content:center;
    margin-top:50px;
}
.portfolio h2{
    padding-bottom:50px;
}

.img1{
    display:block;
}

.img2{
    display:none;
}

/*-----SUB PAGE SERVICIOS-----*/
.separador-servicios{
    margin-top:13vh;
    background-image:url("imagenes/fondoescritor.png");
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
    background-repeat: none;
    height:30vh;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:3vh;
}
.separador-servicios-empresas{
    background-image:url("imagenes/fondo-empresa.png");
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
    background-repeat: none;
    height:30vh;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:3vh;
}
.maquetacionformatos-servicios{
    width:80%;
    margin:auto;
    padding-bottom:75px;
    margin-top:0px;
}
.maquetacionformatos-servicios h1{
    margin-bottom:25px;
}
.maquetacionformatos-servicios h2{
    margin-bottom:25px;
}
.maquetacionformatos-servicios h3{
    margin-bottom:15px;
}
.formatos-servicios{
    width:30%;
    margin-top:25px;
    justify-content:center;
    text-align:center;
    margin-bottom:25px;
}
.formatos-servicios img{
    height: 50px;
    margin-bottom:10px;
}
.contenidoformatos-servicios{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
	margin-bottom:50px;
}
#maquetacionformatosboton{
display:flex;
justify-content:center;
margin-top:25px;
}
.bulletpoints{
    width:65%;
    margin:auto;
    margin-top:25px;
    display:flex;
    justify-content:space-between;
}

.bullet{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:20px;
}

.bullet img{
    height:20px;
}
/* ----ABOUT---- */
.about{
    width:60%;
    padding-bottom:150px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:auto;
    margin-top:0px;
}
.textcolumn{
    width:50%;
}
.textcolumn h2{
    text-align:left;
}
.textcolumn p{
    margin-top:20px;
    margin-bottom:20px;
}
.aboutimg{
    width:40%;
    margin:auto;
}
.aboutimg img{
    width:100%;
    object-fit:cover;
}

/* ----FOOTER---- */
.footer{
    width:90%;
    margin:auto;
    padding-bottom:150px;
    margin-top:150px;
}
.footerlogo{
    display:flex;
    justify-content:center;
    margin-bottom:50px;
    width:30%;
}
.footer p{
    font-size:12pt;
    line-height:20pt;
}
.footerelements{
    display:flex;
}
.footermenu{
    display:flex;
}
.footermenu h3{
    margin-bottom:25px;
}
.rrss{
    margin-left:100px;
    text-align:center;
}
.rrss h3{
    margin-bottom:25px;
    display:inline-block;
}

.iconosrrss{
    display:flex;
    justify-content: center;
}
#linkedin{
    width:30px;
    margin-right:20px;
}
#instagram{
    width:30px;
}

.rrss button{
    margin-top:25px;
    display:inline-block;
}
.footertext{
    text-align:end;
    margin-left:auto;
    margin-right:0;
    width:40%
}
#terms{
    width:100%;
    display:flex;
    justify-content:space-between;
    margin-top:100px;
}



/*------FORMULARIO-------*/

.contact-container{
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    margin-bottom:0px;
}
.contact-left{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0px;
}
.contact-imputs{
    width:400px;
    height:50px;
    border:none;
    border-radius:50px;
    outline: 1px solid rgb(208, 255, 0);
    padding-left:25px;
    font-weight:500;
    color:white;
    margin-top:5px;
}
.contact-left textarea{
    height:140px;
    padding-top:15px;
    border-radius:20px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.contact-inputs:focus{
    border:2px solid white;
}
.contact-inputs::placeholder{
    color:white;
}
.contact-left button{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    gap:10px;
    cursor:pointer;
}

.form p{
    margin-bottom:0px;
    padding-bottom:0px;
    margin-top:20px;
}
.form button{
    margin-top:20px;
}
/*popup*/
dialog{
    background-color:red;
    padding:0;
    margin:0px;
    color:black;

    background: rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);

    position: fixed;
    /* Move it 50% relative to container */
    top: 50%;
    left: 50%;
    /* Move it back 50% relative to self */
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);    
}
dialog .wrapper{
    padding:30px;
}
dialog::backdrop{
    background-color:rgba(0, 0, 0, 0.8);
}
/*----------SUB PAGE SOBRE MI------------*/
.presentation{
    width:60%;
    GAP:20PX;
    margin:auto;
    margin-top:150px;
    text-align:justify;
    text-justify:center;
    margin-bottom:100px;
    hyphens:auto;
}
.presentation h2{
    margin-bottom:20px;
}
.presentation p{
margin-bottom:20px;
}
.presentationbutton{
    display:flex;
    justify-content:center;
}

.left-column h2{
    text-align:left;
    margin-bottom:30px;
}
.left-column p{
    margin-bottom:30px;
    text-align:justify;
    hyphens:auto;
    min-width:400px;;
}
.left-column{
    margin-right:0px;
}
.bio{
    display:flex;
    width:80%;
    align-items:center;
    margin:auto;
    margin-top:200px;
}
.bio2{
    display:flex;
    width:80%;
    align-items:center;
    margin:auto;
    margin-top:0px;
}
.right-column{
    margin-left:100px;
}
.presentation img{
    object-fit:cover;
}
.right-column h2{
    text-align:left;
    margin-bottom:30px;
}
.right-column p{
    margin-bottom:30px;
}
.right-column{
    margin-right:100px;
    text-align:justify;
    hyphens:auto;
}
.ctaabout{
    width:70%;
    margin:auto;
    margin-bottom:50px;
    margin-top:150px;
}

.ctabuttons{
    display:flex;
    justify-content:center;
    margin-top:20px;
}
.ctabuttons button{
    margin-left:30px;
    margin-right:30px;
}

/*-----SUB PAGE PROJECTS-----*/
.projects{
    width:90%;
    margin:auto;
    margin-top:100px;
    margin-bottom:150px;
}
.projects h2{
    text-align:start;
}

/*RETICULA 1*/
.reticula1, .reticula2, .reticula3{
    margin-top:50px;
    margin-bottom:50px;
}
.image-grid{
    --gap:16px;
    --num-cols:4;
    --row-height:300px;

    box-sizing:border-box;
    padding: var(--gap);

    display:grid;
    grid-template-columns:repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap:var(--gap);
    padding-left:0px;
    padding-right:0px;
}

.image-grid img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.image-grid-col-2{
    grid-column: span 2;
}
.image-grid-row-2{
    grid-row: span 2;
}
.reticula3 .image-grid{
    --num-cols:3;
    width:70%;
}
.reticulatexto{
    display:flex;
}
.reticulatexto p{
    width:30%;
    margin-top:16px;
    margin-left:50px;
    text-align:justify;
    hyphens:auto;
}
.reticula4 p{
    width:100%;
    margin:0px;
}

/*  GRACIAS  */
.gracias{
    margin-top:200px;
}

.centerbutton{
    display:flex;
    justify-content:center;
    margin-top:20px;
    margin-bottom:20px;
}



/* PARA MOVILES */
@media (max-width: 440px){
   h1{
    font-size: 55pt;
    font-size:10vw;
    text-align:center;
    font-family: "Unbounded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color:white;
    hyphens:auto;
}
h2{
    font-size: 7vw;
    text-align:center;
    font-family: "Unbounded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color:white;
}
h3{
    font-size: 5vw;
    font-family: "Unbounded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color:white; 
}
p{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height:18pt;
    font-size: 4vw;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight:500;
    font-style:normal;
    color:white;
}
.button{
    padding:10px;
    font-size:15px;
    width:200px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
    border:1px solid white;
    border-radius:5px;
    background-color:black;
    color:white;


    transition: all .4s ease;
    text-transform: uppercase;
    text-align: center;
}
.button:hover{
    padding:10px;
    font-size:15px;
    width:200px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
    border:1px solid rgb(208, 255, 0);
    background-color:rgb(208, 255, 0);
    color:black;
    border-radius:5px;
}

body{
    background:black;
}

.backgroundimage{
    background-image:url("imagenes/fondomobile.png");
    background-position:center;
    background-attachment:fixed;
    background-size:cover;
    background-repeat: none;
}

/* ---HEADER--- */
.header{
padding-top:50px;
}

#logoheader{
    height:30px;
    margin-left:20px;
    display:none;
}

#logoheadermobile{
    height:30px;
    margin-left:20px;
    display:block;
    order:1;
}

nav{
    width: 300px;
    padding: 0 15%;
    padding-top:50px;
    margin: auto;
    padding-top:40px;

    display: flex;
    align-items:center;
    justify-content:space-between;
    padding: 5px 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    position:sticky;
    z-index:1000;
}

nav ul li{
    display:inline-block;
    list-style:none;
}
nav ul li a{
    text-decoration:none;
    margin:15px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    line-height:20pt;
    font-size: 12pt;
    font-family: "Montserrat Alternates", sans-serif;
    font-weight:700;
    font-style:normal;
    color:white;
}
#headerbutton{
    background:black;
    color:white;
    border-radius:30px;
    border:none;
    padding:8px;
    font-size:12px;
    width:150px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;

    transition: all .4s ease;
    text-transform: uppercase;
    text-align: center;
    margin-right:0px;
    margin-left:10px;

    order:2;
}
#headerbutton:hover{
    background:rgb(208, 255, 0);
    color:black;
    border-radius:30px;
    border:none;
    padding:8px;
    font-size:12px;
    width:150px;
    font-family: "Unbounded", sans-serif;
    font-weight:600;
    font-style:normal;
}



/*HAMBURGER*/
.menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    background:rgba(10, 10, 10, 0.9);
    border-radius:30px;
    backdrop-filter: blur(12px);
    max-height:0;
    padding:0;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    transition:max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

.menu li{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    border-bottom:1px solid WHITE;
}
.menu li a{
    padding:10px 0;
}
.menu-toggle:checked~.menu{
    max-height:100vh;
    height:50vh;
    padding:1.5rem 0;
    opacity:1;
    pointer-events:auto;
}
.hamburger{
    display:flex;
    order:3;
    margin-right:20px;
    margin-left:0px;
}
.menu-toggle:checked~.hamburger span{
    background:transparent;
}
.menu-toggle:checked~.hamburger span::before{
    top:0;
    transform: rotate(45deg);
}
.menu-toggle:checked~.hamburger span::after{
    top:0;
    transform: rotate(-45deg);
}

/* ------HOOK----- */

.landing{
    width:100%;
    padding-bottom:70px;
    padding-top:110px;
}
.landing h1{
    font-size:7vw;
    hyphens:none;
    margin-bottom:0px;
}
.hook{
    width:100%;
    padding-bottom:75px;
    padding-top:150px;
}

.hookcontent{
    margin:auto;
    width:90%;
}
.hookcontent p{
    margin-top:20px;
    text-align:justify;
    hyphens:auto;
}
#hookbuttons{
    margin-top:10px;
    margin-bottom:-30px;
}
#hookbuttons button{
    margin-top:10px;
    width:200px;
}
#hookbuttons button:hover{
    width:200px;
}
#hookbuttons{
    display:flex;
    justify-content:center;
}
#hookbuttons .button{
    margin:20px;
}


/* ----CTA------ */
.cta{
    width:80%;
    padding-bottom:0px;
    padding-top:45px;
}

.ctacontent h2{
    margin:auto;
    width:80%;
}
.ctacontent p{
    margin-top:20px;
    text-align:justify;
    hyphens:auto;
    width:80%;
    margin:auto;
    margin-top:10px;
}
.ctabuttons button{
    margin-top:20px;
    width:200px;
}
.hook button:hover{
    width:200px;
}
#ctabuttons{
    display:flex;
    justify-content:center;
}
#ctabuttons .button{
    margin:20px;
}



/* FORMATOS */
.maquetacionformatos{
    width:80%;
    margin:auto;
    padding-bottom:0px;
    margin-top:45px;
}
.maquetacionformatos h2{
    margin-bottom:25px;
}
.formatos{
    width:100%;
    margin-top:25px;
    justify-content:center;
    text-align:center;
    margin-bottom:25px;

}
.contenidoformatos{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    width:80%;
    margin:auto;
}
.contenidoformatos p{
    padding-top:10px;
}
.contenidoformatos h3{
    padding-top:10px;
    font-size:6vw;
}
#maquetacionformatosboton{
display:flex;
justify-content:center;
margin-top:25px;
}

/* -----PRECIO------- */
.precio{
    width: 100%;
    padding-top:45px;
    padding-bottom:45px;
    background-color:rgb(208, 255, 0);
}
.preciocontent{
    justify-content:space-around;
    align-items:center;
    width:80%;
    margin:auto;
}
.preciotexto{
    text-align:center;
}

.preciotexto h2{
    color:black;
}

.preciotexto p{
    margin-top:10px;
    color:black;
}
.precio img{
    height:60px;
    margin-left:20px;
    display:none;
}
#preciobutton button{
    display:flex;
    justify-content:center;
    border:none;
}


/* ----PROYECTOS---- */
.portfolio{
    padding-bottom:75px;
    margin-top:75px;
}
.portfolio h2{
    font-size:9vw;
}
.imagenesportfolio{
    display:flex;
    margin:auto;
    flex-wrap:wrap;
    width:90%;
}

.img-responsive{
    width:100%;
    margin:auto;
}

.img-responsive img{
    width:100%;
    height:350px;
    object-fit:cover;
}

#portfoliobutton{
    display:flex;
    justify-content:center;
    margin-top:20px;
}
.portfolio h2{
    padding-bottom:50px;
}
.img1{
    display:none;
}
.img2{
    display:block;
}

/* ----ABOUT---- */
.about{
    width: 85%;
    padding-bottom:150px;
    display:grid;
    justify-content:space-between;
    margin:auto;
    margin-top:0px;
    margin-bottom:0px;
}
.about button{
    display:flex;
    justify-content:center;
    align-items:center;
}

.textcolumn{
    width:100%;
    order: 2;
}
.textcolumn h2{
    text-align:center;
}
.textcolumn p{
    margin-top:20px;
    margin-bottom:20px;
    text-align:justify;
    hyphens:auto;
}
.textcolumn button{
margin:auto;
}
.aboutimg{
    order: 1;
    object-fit:cover;
    margin:auto;
    margin-bottom:25px;
    width:90%;
}


/*-----SERVICIOS-----*/
.separador-servicios{
    margin-top:17vh;
}
.contenidoformatos-servicios{
display:flex;
margin:auto;
flex-wrap:wrap;
}
.formatos-servicios{
    width:100%;
}
.bulletpoints{
    display:inline;
}

/*-----FORM-----*/
.form{
    margin-top:0px;
    margin-bottom:75px;
}
.contact-imputs{
    width:275px;
}

.form button{
    margin-top:20px;
}

/* ----FOOTER---- */
.footer{
    width:90%;
    margin:auto;
    padding-bottom:150px;
    margin-top:0px;
}
.footerlogo{
    display:flex;
    justify-content:center;
    margin-bottom:50px;
    width:90%;
}
.footer p{
    font-size:10pt;
    line-height:20pt;
}
.footerelements{
    display:grid;
}
.footermenu{
    display:table;
}
.footermenu h3{
    margin-bottom:10px;
}

.rrss{
    margin-left:0px;
    margin-top:20px;
    text-align:left;
}
.rrss h3{
    margin-bottom:10px;
    display:inline-block;
}

.iconosrrss{
    display:flex;
    justify-content: left;
    height:25px;
}
#linkedin{
    width:30px;
    margin-right:20px;
}
#instagram{
    width:30px;
}

.rrss button{
    margin-top:25px;
    display:inline-block;
}
.footertext{
    margin:auto;
    width:90%;
    margin-top:50px;
    text-align:start;
    text-align:justify;
    hyphens:auto;
}
.footertext p{
    line-height:13pt;
    margin-bottom:10px;
}
#terms{
    margin:auto;
    width:90%;

    display:inline;
} 
#terms p{
    margin-top:20px;
    line-height:15pt;
    margin-bottom:15px;
    width:90%;
    text-align:justify;
    hyphens:auto;
}

/*RETICULA2*/
.image-grid{
    --num-cols:2;
    --row-height:200px;
}

/*----------SUB PAGE SOBRE MI------------*/
.subpageabout{
    width:80%;
    margin:auto;
}
.presentation{
    display:flex;
    flex-direction:column;
    margin-top:150px;
    margin-bottom:50px;
    width:100%;
}
.presentation .left-column{
    width:100%;
    margin:auto;
    order:2;
    margin-top:0px;
    margin-bottom:0px;
}
.presentation .left-column h2{
    text-align:center;
    margin-bottom:20px;
    margin-top:20px;
}

.presentation .left-column p{
    margin-bottom:30px;
    min-width:100px;
    width:100%;
    margin:auto;
}
.presentation .left-column button{
    margin:auto;
    align-content:center;
    justify-content:space-around;
    display:flex;
    margin-top:20px;
    display:none;
}
.presentation .right-column{
    margin:auto;
    width:80%;
    margin-left:0px;
    margin-top:120px;
    order:1;
}

.presentation .right-column img{
    object-fit:cover;
    width:300px;
    margin:auto;
    margin-top:0px;
}
.bio{
    display:flex;
    width:80%;
    align-items:center;
    margin:auto;
    margin-top:200px;
}
.bio2{
    display:inline;
    width:80%;
    align-items:center;
    margin:auto;
    margin-top:0px;
}
.bio2 .left-column{
    margin:auto;
}
.bio2 .left-column img{
    object-fit:cover;
    width:300px;
    margin:auto;
}
.bio2 .right-column{
    text-align:justify;
    hyphens:auto;
    width:100%;
    margin:auto;
    margin-bottom:50px;
}
.bio2 .right-column h2{
    text-align:center;
    margin-bottom:20px;
    margin-top:20px;
    hyphens:none;

}
.bio2 .right-column p{
    margin-bottom:30px;
}
.bio2 .right-column button{
    margin:auto;
    align-content:center;
    justify-content:space-around;
    display:flex;
    margin-top:20px;
    display:none;
}

.cta{
    width:100%;
    margin:auto;
    margin-bottom:75px;
}
.ctacontent{
    width:100%;
}
.ctabuttons{
    display:flex;
    justify-content:center;
    margin-top:20px;
}
.ctabuttons button{
    margin-left:30px;
    margin-right:30px;
}

.ctaabout{
    width:100%;
    margin-bottom:50px;
    margin-top:50px;
}
.ctaabout h2{
    font-size:6vw;
    width:100%;
    color:rgb(208, 255, 0);
}
.ctaabout p{
    width:100%;
}
.ctaabout button{
    margin-top:0px;
}

/*-----SUB PAGE PROYECTOS-----*/
.projects{
    margin-top:110px;
    padding-top:0px;
}
.reticula1{
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}
.reticula2{
    margin-top:50px;
    margin-bottom:0px;
}
.reticula3{
    margin-top:50px;
    margin-bottom:0px;
}

/*-----SUB PAGE SERVICIOS-----*/
.separador-servicios{
    background-image:url("imagenes/fondoescritor.png");
    margin-top:0px;
    height:300px;
}
.separador-servicios-empresas{
    background-image:url("imagenes/fondo-empresa-mobile.png");
}
}