/* CSS Reset */

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, 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, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    overflow: hidden;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1.35;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Page Styles */

@font-face {
    font-family: Montserrat;
    src: url("../fonts/montserrat.ttf") format("truetype");
}

#container, #imagem, #text-container, #titulo, #credito, #source-info, #instagram-logo, #texto, #texture-bg, #eletromidia-logo {
    position: absolute;
    display:block;
    font-family: montserrat;
}

#container {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#imagem, #texture-bg {
    bottom: 0;
    height: 100%;
}

#texture-bg {
    bottom: 0;
    height: 100%;
}

#eletromidia-logo {
    width: 10%;
    right: 2%;
}

#container {
    width: 100%;
    height: 100%;
}

#text-container {
    left: 46%;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    margin: 12% 5% 5%;
    bottom: 0;
}

#titulo {
    font-size: 5vmin;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

#credito {
    top: 6.5vmin;
    padding: 1.2vmin 1.4vmin;
    font-size: 3.5vmin;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

#source-info {
    top: 13.5vmin;
    left: 5.5vmin;
    line-height: 6vmin;
    font-size: 3vmin;
    font-weight: 700;
    white-space: nowrap;
}

#instagram-logo {
    top: 14.5vmin;
    width: 4.5vmin;
}

#texto {
    top: 25vmin;
    font-size: 4.5vmin;
    font-weight: 700;
}

@media (min-aspect-ratio: 4/2) {
    /*16:9 = uma tela, 16:6 = duas telas, 16:3 = três telas, logo 16:4 = mais de duas telas e menos que três, não usar o número exato de telas e sim um valor intermediário.*/

    #imagem img {
        height:100%;
    }

    #text-container {
        left: 40%;
        bottom: 0;
        width: 35%;
        margin: 2% 2% 3%;
        top: 17%;
        scale: 130%;
    }
}


@media (max-aspect-ratio: 4/3) {
    #imagem {
        height: 70%;
        bottom: 0;
    }
    #imagem img {
        height: 100%;
    }
    #texto {
        top: 23vmin;
        font-size: 4vmin;
    }
    #titulo {
        font-size: 4vmin;
    }
    #credito {
        font-size: 3vmin;
    }
    #texture-bg {
        width: 60%;
        left: -15%;
    }
}

@media (orientation: portrait) {
   #texture-bg, #imagem {
        bottom: unset;
        height: 50%;
   }
   #text-container {
        left: 0;
        margin: 5%;
        bottom: unset;
        top: 50%;
   }
   #eletromidia-logo {
        width: 20%;
        right: 4%;
   }
}

@media (min-aspect-ratio: 16/4) {
    /*16:9 = uma tela, 16:6 = duas telas, 16:3 = três telas, logo 16:4 = mais de duas telas e menos que três, não usar o número exato de telas e sim um valor intermediário.*/
   #texture-bg {
        width: 33.33%;
        height: 190%;
        bottom: -170px;
   }

    #imagem {
        top: 0;
        left: 8.2%;
        transform-origin: top;
        scale: 120%;
    }

    #eletromidia-logo {
        right: 0;
        width: 33.33%;
        height: 100%;
    }

    #text-container {
        top: 4%;
        left: 33.33%;
        bottom: 0;
        width: 29.5%;
        margin: 2% 2% 3%;
        scale: 100%;
    }  


    #titulo {
        font-size: 6vmin;
    }
    
    #texto {
        top: 30vmin;
        font-size: 6vmin;
    }
    
    #credito {
        top:8.3vmin;
        font-size: 4.7vmin;
    }
    #source-info {
        left:9vmin;
        top:19vmin;
        font-size: 4.7vmin;
    }
    
    #instagram-logo {
        top: 19vmin;
        width: 6.5vmin;
    }
    
}