/* MAIN_____________________________________________________*/

/*parte superior - DESKTOP.................*/


#imagen_superior {
    grid-area: img-sup;
    margin-top: 6em;
}

#imagen_superior img {
    width: 30em;
}


#imagen_inferior {
    grid-area: img-inf;
    height: 20em;
}

#centrado {
    display: flex;
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#f_02 {
    width: 10em;
    margin-top: 10em;
}

#tegusta {
    width: 20em;
}

#dcha_contacto {
    margin-left: auto;
}


#dcha_contacto ul {
    list-style-type: none;
    padding-left: 1em;
}


.aside_1 {
    grid-area: aside-1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-top: 100%;
}

.grid_1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr .5fr;
    grid-template-areas:
        'img-sup img-sup img-sup aside-1'
        'img-inf img-inf img-inf aside-1';
    gap: 1em;
    padding-top: 4.2em;
    width: 80vw;
    margin: 0 auto;
    margin-bottom: 1em;
    max-width: 1280px;
}

.red {
    color: #ff5757;
}

#bg {
    background-color: #F7F5F4;
}


/*parte superior - MOBILE.................*/
.mobile_sup{
    width: 90%;
    margin: 0 auto;
    display: none;
}

.mobile_sup h1{
    padding-top: 3em;
}

.vl_mob{
    position: relative;
    border-bottom: 2px solid #000;
    height: 1em;
    z-index: -1;
    width: 100%;
    margin-top: 2em;
}

.mobile_sup .portfolio-nav{
    margin-bottom: 2em;
}

#boton_contacto{
	padding: .6em 4em .6em .6em;
	border-width: .15em;
	border-style: solid;
    border-color: #ff5757;
    color: #ff5757;
    transition: .3s;
}

#boton_contacto:hover{
    background-color: #ff5757;
    color: #fff;
    transition: .3s;
}


/*parte inferior.................*/

.yo {
    grid-area: yo;
}

#txt_mio {
    margin-top: 1em;
}

.aside_2 {
    grid-area: aside-2;
}

#t1 {
    margin-top: 10px;
    text-align: right;
}

#t2 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-top: 10em;
}

#t3 {
    writing-mode: vertical-lr;
    margin-left: auto;
    margin-top: 5em;
}

#t4 {
    margin-top: 25em;
}

/*Portfolio..................................*/
.portfolio {
    grid-area: portfolio;
}


/*Portfolio - menu..................................*/

.portfolio-nav{
    padding-top: 1em;
}

.portfolio-button {
    display: inline;
    text-decoration: none;
    cursor: pointer;
    display: inline;
    border: none;
    background-color: transparent;
    transition: 200ms all ease;
    text-transform: uppercase;
    font-weight: 500;
    color: #000;
    padding-left: 0;
    padding-right: .5em;
}

.portfolio-button:hover,
.portfolio-button:focus {
    text-decoration: none;
    color: #ff5757;
    outline: none;
}

.portfolio-selected {
    color: #ff5757;
}

/*Portfolio - linea vertical de los botones..................................*/
.vl{
    position: relative;
    border-bottom: 2px solid #000;
    height: 1em;
    z-index: -1;
    margin-bottom: 2em;
    width: 8em;
}

/*Portfolio - menu..................................*/

/*Portfolio - Imgs..................................*/
#portfolio {
    margin: auto;
    padding-top: 1em;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
    -webkit-column-width: 50%;
    -moz-column-width: 50%;
    column-width: 50%;
    background-color: #ffffff;
}

.tile {
    -webkit-transition: 300ms all ease;
    transition: 300ms all ease;
    overflow: hidden;
    text-align: center;
    padding-bottom: 1em;
    break-inside: avoid;
}

.tile img {
    max-width: 100%;
    width: 100%;
    height: auto;
    padding-bottom: 1em;
    transition: 300ms all ease;
    overflow: hidden;
}

.tile img:hover,
.tile img:focus {
    opacity: 0.8;
}

.img_blurr{
    filter: blur(.5em);
}


/*Portfolio - codepen..................................*/


.grid_2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr .5fr;
    grid-template-areas:
        'yo portfolio portfolio aside-2';
    gap: 2em;
    padding-top: 4.2em;
    width: 80vw;
    margin: 0 auto;
    padding-bottom: 5em;
    max-width: 1280px;
}


/*Media Queries..................................*/

/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Michael Vieth
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
 */

 /*Tablet landscape*/
 @media all and (min-width: 1024px) and (max-width: 1300px) {
    #t4 {
        margin-top: 25vw;
    }
 }


  /*Tablet portrait*/
 @media all and (min-width: 700px) and (max-width: 1024px) { 
    .aside_2{
        display: none;
    }
    .grid_2 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 'yo portfolio portfolio';
        gap: 2em;
        padding-top: 4.2em;
        width: 90vw;
        margin: 0 auto;
        padding-bottom: 5em;
        max-width: 1280px;
    }    
 }
 

  /*Phone*/
 @media all and (max-width: 700px) { 
    #bg{
        display: none;
    }
    .yo{
        display: none;
    }
    .aside_2{
        display: none;
    }
    .grid_2{
        display: flex;
        padding-top: 4.2em;
        width: 90vw;
        margin: 0 auto;
        padding-bottom: 5em;
    }
    .mobile_sup{
        display: block;
    }
    #portfolio {
        margin: auto;
        padding-top: 1em;
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 1em;
        -moz-column-gap: 1em;
        column-gap: 1em;
        -webkit-column-width: 50%;
        -moz-column-width: 50%;
        column-width: 50%;
    }
 }
 
 /* CSS for iPhone, iPad, and Retina Displays */
 
 /* Non-Retina */
 @media screen and (-webkit-max-device-pixel-ratio: 1) {
 }
 
 /* Retina */
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (-o-min-device-pixel-ratio: 3/2),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
 }
 
 /* iPhone Portrait */
 @media screen and (max-device-width: 480px) and (orientation:portrait) {
    #bg{
        display: none;
    }
    .yo{
        display: none;
    }
    .aside_2{
        display: none;
    }
    .grid_2{
        display: flex;
        padding-top: 4.2em;
        width: 90vw;
        margin: 0 auto;
        padding-bottom: 5em;
    }
    .mobile_sup{
        display: block;
    }
    #portfolio {
        margin: auto;
        padding-top: 1em;
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 1em;
        -moz-column-gap: 1em;
        column-gap: 1em;
        -webkit-column-width: 50%;
        -moz-column-width: 50%;
        column-width: 50%;
    }
 } 
 
 /* iPhone Landscape */
 @media screen and (max-device-width: 480px) and (orientation:landscape) {
 }
 
 /* iPad Portrait */
 @media screen and (min-device-width: 481px) and (orientation:portrait) {
 }
 
 /* iPad Landscape */
 @media screen and (min-device-width: 481px) and (orientation:landscape) {
 }