@charset "utf-8";
/* CSS Document */

body {
    font-family:Tahoma, Geneva, sans-serif;
    line-height: 1;
    font-weight: 300;
	background-color:#171717;
}

a,
a:focus,
a:hover,
a:visited {
    text-decoration: none;
}

.atalho {
    font-size: 0;
    position: absolute;
    top: 0
}

nav {
    box-shadow: 0 5px 5px rgba(0, 0, 0, .25);
    background: #171717;
    background: linear-gradient(#171717, #373737, #171717);
    padding: 20px 0;
    text-align: center;
}

.nav img{
	margin:0 10px;
}
	
.image-top {
    vertical-align: middle;
    padding:0;
}

.image {
    height: calc( 100vh - 150px); /*85px para apenas barra de direitos*/
    overflow: hidden;
    background-position: center center;
    background-size: cover;
	background-image: url("../img/layout/imagem-topo.png");
	
	position:relative;
}

.image-text{
	position:relative;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	
	color:#fff;
	text-align:center;
	font-size:44pt;
	font-weight:bold;
	text-transform:uppercase;
}

.image-text span{
	white-space: nowrap;
}

.img-fluid {
    opacity: 0
}

.pages{
	padding:0;
	position:relative;
}

.pages-item {
	height: 240px;
    overflow: hidden;
    background-position: center center;
    background-size: cover;	
	color:#fff;
	text-align:center;
	font-size:20pt;
	font-weight:bold;
	text-transform:uppercase;
	position:relative;
	cursor:pointer;
}

.pages-item:first-child{
	background-image: url("../img/layout/7th-generation.jpg");
}

.pages-item:nth-child(2){
	background-image: url("../img/layout/8th-generation.jpg");
}

.pages-item:nth-child(3){
	background-image: url("../img/layout/laptops-e-desktops.jpg");
}

.pages-item:nth-child(4){
	background-image: url("../img/layout/optane.jpg");
}

.pages-item:hover{
	-ms-filter: grayscale(1);
	-o-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-webkit-filter: grayscale(1);
  	filter: grayscale(1);
}

.generation7, .generation8, .laptops, .optane{
	text-shadow:0px 3px 3px rgba(0, 0, 0, 1);
	transition: opacity 0.2s ease-in-out;
	pointer-events: none;
}

.pages-item > div{
	position:relative;
	top:15%; /*50% para ficar no centro da imagem*/
	transform: translate(0%, -50%);
}

footer{
	text-align:center;
	padding:15px 0;
	color:#7b7a7a;
}

.footer a{
	color:#7b7a7a;
	text-decoration: none;
}

.footer a:hover{
	color:#9d9c9c;
}

@media only screen 
  and (max-width: 768px){
	.image-text span{
		display:block;
	}
}