/*IMAGEN SUPERIOR__________________________________________*/

#space{
    height: 4.2em;
}

.superior{
    background-image: url('/IMGs/PORTFOLIO/GRIDLAB/Banner\ top@1.5x.jpg');
    background-size: cover;
    height: 30em;
    width: 100%;
    display: flex;
    background-position: center;
}


/*CONTENIDO DEL ARTÍCULO__________________________________________*/


#back{
    grid-area: back;
    padding-bottom: 3em;
}

#back:first-letter{
    color: #ff5757;
}

#titulo h5{
    font-size: .8em;
}

#titulo{
    grid-area: titulo;
}

.desc{
    grid-area: desc;
}

.txt01{
    grid-area: txt01;
}

.txt02{
    grid-area: txt02;
}

.txt03{
    grid-area: txt03;
}

#img01{
    grid-area: img01;
}

#img02{
    grid-area: img02;
}

#img03{
    grid-area: img03;
}

#img04{
    grid-area: img04;
}

#img05{
    grid-area: img05;
}

#img06{
    grid-area: img06;
}

#img07{
    grid-area: img07;
}

.contacto02{
    grid-area: btn;
}

#img08{
    grid-area: img08;
    margin-top: auto;
}

#img09{
    grid-area: img09;
}

#img10{
    grid-area: img10;
}

#img11{
    grid-area: img11;
}

#img12{
    grid-area: img12;
}

#img13{
    grid-area: img13;
}

#img14{
    grid-area: img14;
}

#img15{
    grid-area: img14;
    display: none;
}

aside{
    grid-area: aside;
}

h6{
    margin-bottom: 0;
    margin-top: 0;
}

.inline h6 , .inline p{
    display: inline;
    margin: 0;
}

.contacto01{
    display: flex;
}

#boton_contacto01, #boton_contacto03{
    width: 100%;
    max-width: 8em;
    padding: 0.5rem 1rem;
	border-width: .15em;
	border-style: solid;
    border-color: #ff5757;
    color: #ff5757;
    transition: .3s;
    margin-top: 1em;
}

#boton_contacto01:hover, #boton_contacto03:hover{
    background-color: #ff5757;
    color: #fff;
    transition: .3s;
}

#boton_contacto03{
    display: none;
}

#boton_contacto02{
    width: 100%;
    max-width: 12em;
    padding: 0.5rem 1rem;
	border-width: .15em;
	border-style: solid;
    border-color: #ff5757;
    color: #fff;
    transition: .3s;
    background-color: #ff5757;
    margin-top: 1em;
}

#boton_contacto02:hover{
    color: #ff5757;
    transition: .3s;
    background-color: white;
}


.grid_1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
        'back . . . . . .'
        'titulo . . desc txt01 txt01 aside'
        'img01 img01 img01 img01 . . aside'
        'img02 img02 img03 img03 img03 img03 aside'
        'img04 img04 img04 img04 . . aside'
        '. txt02 txt02 txt02 . . aside'
        'img07 img07 img08 img08 img08 img08 aside'
        '. img05 img05 img06 img06 . aside'
        'img09 img09 . img10 img10 . aside'
        'img11 img11 img11 img11 txt03 txt03 aside'
        'img12 img12 img13 img13 txt03 txt03 aside'
        '. . img14 img14 img14 img14 aside';
    gap: 1em;
    padding-top: 1em;
    row-gap: 2em;
    width: 80vw;
    margin: 0 auto;
    margin-bottom: 6em;
    max-width: 1280px;
}



/*ASIDE DEL ARTÍCULO__________________________________________*/

aside h4{
    text-align: right;
}

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

#as02{
    writing-mode: vertical-lr;
    margin-left: auto;
    margin-top: 55em;
}

#as03{
margin-top: 105em;
}

/**
 * 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) {
    aside{
        display: none;
    }
    .grid_1{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
        grid-template-areas:
            'back . . . . .'
            'titulo . . desc txt01 txt01'
            'img01 img01 img01 img01 . .'
            'img02 img02 img03 img03 img03 img03'
            'img04 img04 img04 img04 . .'
            '. txt02 txt02 txt02 . .'
            'img07 img07 img08 img08 img08 img08'
            '. img05 img05 img06 img06 .'
            'img09 img09 . img10 img10 .'
            'img11 img11 img11 img11 txt03 txt03'
            'img12 img12 img13 img13 txt03 txt03'
            '. . img14 img14 img14 img14';
        gap: 1em;
        padding-top: 1em;
        row-gap: 2em;
        width: 80vw;
        margin: 0 auto;
        margin-bottom: 6em;
        max-width: 1280px;
    }
 }

 /*Tablet portrait*/
@media all and (min-width: 700px) and (max-width: 1024px) {
    aside{
        display: none;
    }

    #boton_contacto03{
        display: inline;
    }

    #boton_contacto01{
        display: none;
    }

    .txt01, .txt02, .txt03{
        margin-bottom: 3em;
    }

    .contacto02{
        display: none;
    }

    #titulo h2{
        font-size: 2em;
    }

    .grid_1{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
        grid-template-areas:
            'back . . . . .'
            'titulo . . . . .'
            'desc . txt01 txt01 txt01 txt01'
            'desc . txt01 txt01 txt01 txt01'
            'img01 img01 img01 img01 . .'
            'img02 img02 img03 img03 img03 img03'
            'img04 img04 img04 img04 . .'
            'txt02 txt02 txt02 txt02 . .'
            'img07 img07 img08 img08 img08 img08'
            '. img05 img05 img06 img06 .'
            'img09 img09 . img10 img10 .'
            'img11 img11 img11 img11 . .'
            'txt03 txt03 txt03 txt03 . .'
            'img12 img12 . img13 img13 .'
            '. . img14 img14 img14 img14';
        gap: 1em;
        padding-top: 1em;
        row-gap: 2em;
        width: 90vw;
        margin: 0 auto;
        margin-bottom: 6em;
        max-width: 1280px;
    }
}


 /*Phone*/
 @media all and (max-width: 700px) {
    aside{
        display: none;
    }

    #back{
        display: none;
    }

    #boton_contacto03{
        display: inline;
    }

    #boton_contacto01{
        display: none;
    }

    .contacto02{
        display: none;
    }

    .txt02, .txt03{
        margin-bottom: 3em;
    }

    .superior{
        height: 20em;
    }

    #img15{
        display: flex;
    }

    #img02{
        display: none;
    }
    .grid_1{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'titulo titulo'
            'desc desc'
            'txt01 txt01'
            'img01 img01'
            'img15 .'
            'img03 img03'
            'img04 img04'
            'txt02 txt02'
            'img07 .'
            'img08 img08'
            'img05 img06'
            '. img10'
            'img11 img11'
            'txt03 txt03'
            'img12 .'
            'img09 img13'
            'img14 img14';
        padding-top: 4.2em;
        width: 90vw;
        gap: 1em;
        row-gap: 2em;
        margin: 0 auto;
        margin-bottom: 6em;
    }
 }
 
 
 /* Portrait */
 @media screen and (orientation:portrait) { /* Portrait styles here */ }
 /* Landscape */
 @media screen and (orientation:landscape) { /* Landscape styles here */ }
 
 
 /* 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) {
    aside{
        display: none;
    }

    #back{
        display: none;
    }

    #boton_contacto03{
        display: inline;
    }

    #boton_contacto01{
        display: none;
    }

    .contacto02{
        display: none;
    }

    .txt02, .txt03{
        margin-bottom: 3em;
    }

    .superior{
        height: 20em;
    }
    
    #img15{
        display: flex;
    }

    #img02{
        display: none;
    }
    .grid_1{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'titulo titulo'
            'desc desc'
            'txt01 txt01'
            'img01 img01'
            'img15 .'
            'img03 img03'
            'img04 img04'
            'txt02 txt02'
            'img07 .'
            'img08 img08'
            'img05 img06'
            '. img10'
            'img11 img11'
            'txt03 txt03'
            'img12 .'
            'img09 img13'
            'img14 img14';
        padding-top: 4.2em;
        width: 90vw;
        gap: 1em;
        row-gap: 2em;
        margin: 0 auto;
        margin-bottom: 6em;
    }
 } 
 
 /* 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) {
 }