/*IMAGEN SUPERIOR__________________________________________*/

#space{
    height: 4.2em;
}

.superior{
    background-image: url('/IMGs/PORTFOLIO/NEXO/Banner.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{
    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: img15;
}

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: 8em;
    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;
}

.contacto02{
    display: flex;
    margin-top: auto;
}


.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 txt02 txt02 aside'
        '. img02 img02 img02 img03 img03 aside'
        'img04 img04 img04 img04 img04 img04 aside'
        '. txt03 txt03 txt03 . . aside'
        'img05 img05 . img06 img06 img06 aside'
        'img07 img07 img07 img07 img07 btn aside'
        '. img08 img08 img08 img09 img09 aside'
        'img10 img10 . img11 img11 . aside'
        'img12 img12 img13 img13 img14 img14 aside'
        '. . . . img15 img15 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: 40em;
}

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

#as03{
margin-top: 70em;
}

/**
 * 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 txt02 txt02'
            '. img02 img02 img02 img03 img03'
            'img04 img04 img04 img04 img04 img04'
            '. txt03 txt03 txt03 . .'
            'img05 img05 . img06 img06 img06'
            'img07 img07 img07 img07 img07 btn'
            '. img08 img08 img08 img09 img09'
            'img10 img10 . img11 img11 .'
            'img12 img12 img13 img13 img14 img14'
            '. . . . img15 img15';
        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;
    }

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

    .contacto02{
        display: none;
    }

    .grid_1{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
        grid-template-areas:
            'back . . . . .'
            'titulo . . . . .'
            'desc . txt01 txt01 txt01 txt01'
            'desc . txt02 txt02 txt02 txt02'
            'img01 img01 img01 img01 . .'
            '. img02 img02 img02 img03 img03'
            'img04 img04 img04 img04 img04 img04'
            '. txt03 txt03 txt03 txt03 .'
            'img05 img05 . img06 img06 img06'
            'img07 img07 img07 img07 img07 .'
            '. img08 img08 img08 img09 img09'
            'img10 img10 . img11 img11 .'
            'img12 img12 img13 img13 img14 img14'
            '. . . . img15 img15';
        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;
    }

    .grid_1{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'titulo titulo'
            'desc desc'
            'txt01 txt01'
            'txt02 txt02'
            'img01 img01'
            'img02 img02'
            '. img03'
            'img04 img04'
            'txt03 txt03'
            '. img05'
            'img06 img06'
            'img07 img07'
            'img09 btn'
            'img08 img08'
            'img10 img11'
            'img12 img13'
            'img14 img15';
        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;
    }
    
    .grid_1{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'titulo titulo'
            'desc desc'
            'txt01 txt01'
            'txt02 txt02'
            'img01 img01'
            'img02 img02'
            '. img03'
            'img04 img04'
            'txt03 txt03'
            '. img05'
            'img06 img06'
            'img07 img07'
            'img09 btn'
            'img08 img08'
            'img10 img11'
            'img12 img13'
            'img14 img15';
        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) {
 }