html, body { height: 100%; width: 100%;}
*, *::before, *::after {border: 0px;margin: 0px;padding: 0px;box-sizing: border-box;outline-color: white; -webkit-text-size-adjust:100%;} 

body {
	font-family: 'Montserrat', sans-serif;
	background: black;
	color: #c09960;
	font-size: 16px;
}

a { text-decoration: none; }

img { max-width: 100%; }

header {
    position: fixed;
    width: 100%;
    height: 45px;
    top: 0;
    background: black;
    /* background-image: url(headerBG.png); */
    /* background-size: cover; */
    z-index: 1;
}

header .logo {
    position: absolute;
    left: 20px;
    /* max-height: 35px; */
    top: 5px;
    max-width: 106px;
}


.compre {
    width: 95px;
    height: 45px;
    background-image: url(compre.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin: auto;
}

header .compre {
    position: absolute;
    right: 90px;
    top: 5px;
}

.instagram, .twitter {
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.twitter {
    background-image: url(twitter.svg);
    right: 20px;
    top: 15px;
}

.instagram {
    background-image: url(instagram.svg);
    right: 55px;
    top: 13px;
}

section.abre {
    padding: 20px;
    background-image: url(bgAtletasMobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}

section.abre .atletas {
    max-width: 100%;
    margin: 10px auto;
    display: block;
}

section.abre h1 {
    font-size: 20px;
    white-space: pre-line;
    line-height: 1;
}

section.abre h2 {
    font-size: 13px;
    margin: 15px 0;
    color: #9c7b4b;
    white-space: pre-line;
    line-height: 1.1;
}

section.abre h2 b {
    display: block;
    color: #c49a6e;
}

section.abre h2 + h2 {
    color: #c49a6e;
}

section.abre .compre {
    width: 145px;
    height: 70px;
}

.saiba {
    width: 120px;
    height: 55px;
    background-image: url(saibaNFT.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    margin: 10px auto;
}

.historia_paixao img.hpjs {
    display: block;
    max-width: 130px;
    margin: 0 auto 15px auto;
}

.historia_paixao img.hashtag {
    display: block;
    max-width: 165px;
    margin: auto;
}

section.NFT {
    text-align: center;
    color: white;
    background-image: url(NFTmobile_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 45px 20px 30px 20px;
}

section.NFT h1 {
    text-transform: uppercase;
    line-height: 1;
    font-size: 23px;
    max-width: 350px;
    margin: 15px auto;
    font-weight: 900;
    white-space: pre-line;
}

section.NFT h2 {
    text-transform: uppercase;
    line-height: 1;
    font-size: 18px;
    max-width: 350px;
    margin: 0 auto;
    font-weight: 900;
    white-space: pre-line;
}

section.NFT h3 {
    font-size: 16px;
    margin-top: 10px;
    font-weight: 900;
}

section.NFT img {
    max-width: 500px;
    width: 100%;
}

section.NFT a {
	display: block;
	max-width: 150px;
	margin: 7px auto 0 auto;
}


section.manto {
    background-image: url(texturaManto.jpg);
    padding: 50px 20px;background-size: cover;
}

section.manto * {
    display: block;
    margin: auto;
    max-width: 100%;
    width: 1024px;
}

footer {
    padding: 20px;
    position: relative;
    background: #111;
}

footer h3 {
    color: #d42127;
    white-space: pre-line;
    position: relative;
    font-size: 14px;
    line-height: 1.14;
    font-weight: 900;
}

footer h3:after {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    background-image: url(setas.svg);
    top: 33px;
    left: 155px;
}

footer h3 b {
    color: #c09960;
}

footer .compre {
    position: absolute;
    right: 20px;
    top: 35px;
    width: 130px;
    height: 60px;
}


footer .sede {
    color: white;
    font-size: 9px;
    text-align: center;
}

footer .sede strong {
    font-weight: 900;
}

footer .sede strong+span {
    display: none;
}

footer .links {
    position: relative;
    max-width: 180px;
    margin: 10px auto;
}

footer .links > .twitter { right: 0; }
footer .links > .instagram { right: 35px; }

footer .links .logo {
    width: 110px;
}

.compre, .saiba {
    transition: 0.3s transform;
}

.compre:hover, .saiba:hover {
    transform: scale(1.03);
}

.sac {
	color: #d42127;
	display: block;
	font-size: 9px;
	font-weight: 700;
	margin: 10px auto;
	text-align: center;
}


/* mobile */

@media (max-width: 999px) {
    
    section.abre .compre.desktop {
        display: none;
    }

	footer h3 {
		line-height: 16px;
	}
	
}

/* Desktop */

@media (min-width: 1000px) {
    
	.container, header {
		max-width: 1366px;
		margin: auto;
	}

	header {
		height: 170px;
	}    


	header .logo {
		/* max-height: 100px; */
		top: 30px;
		left: 45px;
		max-width: 303px;
	}

	header .compre {
		width: 255px;
		height: 120px;
		top: 36px;
		right: 235px;
	}

	.instagram:hover, .twitter:hover {
		transform: scale(1.1);
	}

	.instagram, .twitter {
		width: 40px;
		height: 40px;
        transition: 0.3s all;
	}

	.twitter {
		right: 45px;
		top: 68px;
	}

	.instagram {
		right: 115px;
		top: 65px;
	}

	section.abre {
		background-image: url(abreDesktop7.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top right;
		min-height: 1032px;
		padding: 54px;
	}

	section.abre .atletas {
		display: none;
	}

	section.abre .titles, 
	section.abre .historia_paixao {
		max-width: 50%;
		text-align: left;
	}

	section.abre h1 {
		font-size: 48px;
		margin-bottom: 30px;
	}

	section.abre h2 {
		font-size: 28px;
		margin-bottom: 30px;
	}

	section.abre .compre {
		width: 355px;
		height: 165px;
		margin: 0;
		position: relative;
		left: -15px;
	}

	section.abre .compre.mobile {
		display: none;
	}

	.historia_paixao img.hpjs {max-width: 325px;margin: 20px 0;}

	.historia_paixao img.hashtag {max-width: 330px;margin: 15px 0;}

	section.NFT h2 {
		color: #d42127;
		font-size: 42px;
		max-width: 320px;
		margin: 0;
		position: absolute;
		top: 425px;
		left: 140px;
		white-space: normal;
	}

	section.NFT {
		background-image: url(NFTdesktop2_bg.jpg);
		min-height: 650px;
		position: relative;
		padding: 60px 45px 50px 45px;
		margin-top: 170px;
	}

	section.NFT img {
		display: none;
	}

    section.NFT h3 {
        position: absolute;
        top: 385px;
        font-size: 29px;
        left: 70px;
    }

	.saiba {
		position: absolute;
		bottom: 40px;
		left: 135px;
		width: 315px;
		height: 150px;
	}

	section.manto img {/* max-width: 100%; */}

	footer h3 {
		font-size: 30px;
	}

	footer h3:after {
		top: 73px;
		left: 330px;
		width: 25px;
		height: 25px;
	}

	footer .compre {
		right: auto;
		left: 400px;
		width: 255px;
		height: 120px;
		top: 55px;
	}

	footer .links .logo {
		display: none;
	}

	footer .links {
		position: absolute;
		right: 45px;
		margin: 0;
		top: 80px;
	}

	footer .sede {
		position: absolute;
		right: 180px;
		font-size: 20px;
		text-align: left;
		top: 60px;
		line-height: 1;
	}

	footer .sede strong {
		display: block;
		font-size: 26px;
	}

	footer .sede strong+span {
		display: block;
		text-transform: uppercase;
		font-size: 27.5px;
	}

	footer .sede span:last-of-type {
		display: none;
	}

	footer .links > .instagram {
		right: 60px;
		top: -4px;
	}

	footer .links > .twitter {
		top: 0;
		right: 0;
	}

	footer {
		padding: 20px 45px;
	}

	.sac {
		font-size: 18px;
		position: absolute;
		right: 288px;
		top: 135px;
	}

	section.NFT h1 {
		font-size: 50px;
		position: absolute;
		left: 33px;
		top: 130px;
		white-space: normal;
		max-width: 530px;
	}

	section.NFT a {
		position: absolute;
		left: 180px;
		top: 310px;
		max-width: 240px;
	}

	section.NFT a img {
		display: block;
		width: 240px;
	}

}

@media ( min-width: 1000px ) and ( max-width: 1300px ) {

	section.abre {
		min-height: 70vw;
	}


	section.abre h1 {
		font-size: 3.65vw;
	}

	section.abre h2 {
		font-size: 2.15vw;
	}

	.historia_paixao img.hpjs {
		max-width: 22vw;
	}

	section.abre .compre {
		width: 30vw;
		height: 11.5vw;
	}

	.historia_paixao img.hashtag {
		max-width: 22vw;
	}

	section.NFT {
		min-height: 46vw;
	}

	section.NFT h1 {
		font-size: 3.6vw;
		max-width: 38vw;
		top: 9.5vw;
	}

	section.NFT h2 {
		font-size: 3vw;
		max-width: 23.4vw;
		top: 31vw;
		left: 10vw;
	}

    section.NFT h3 {
        font-size: 2.1vw;
        top: 28vw;
    }

	section.NFT a {
		left: 13vw;
		top: 22vw;
	}

	section.NFT a img {
		width: 17.5vw;
	}

	.saiba {
		width: 23vw;
		height: 11vw;
		bottom: 3vw;
		left: 10vw;
	}

	footer h3 {
	    font-size: 25px;
	}

	footer .compre {
		top: 55px;
		left: 341px;
		width: 200px;
	}

	footer .sede {
		font-size: 16px;
	}

	footer h3:after {
		top: 62px;
		left: 275px;
		height: 20px;
		width: 20px;
	}

	.sac {
		right: 215px;
		top: 125px;
	}

}