html { 
	scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    touch-action: pan-y;
}
body {
	background-color: #261A1D;
	background-image: url('../assets/grungebackgoundimage.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: "neue-haas-grotesk-display";
}
section {
  	position: relative;
  	overflow: hidden;
   	-ms-overflow-style: none;  /* IE and Edge */
  	scrollbar-width: none;  /* Firefox */
}
section::-webkit-scrollbar {
	display: none;
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

.container {
    max-width: 1200px;
    padding:30px;
    margin-left:auto;
    margin-right:auto;
    position: relative;
}
.header {
    text-align: center;
    padding-top:140px;
    padding-bottom: 0px;
}
.header span {
	display: none;
}
.logo {
	width: 1000px;
}
.conteudo {
    display: none;
}

.gridder-list > .gridder-item {
    width: 100% ;
    aspect-ratio: 183 / 289;
    position: relative;
}
.gridder-list > .gridder-item:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	background-color: red;
	border-radius: 6px;
	z-index: -1;
  	animation-duration: 10s;
  	animation-fill-mode: forwards;
  	animation-iteration-count: infinite;
  	animation-name: placeHolderShimmer;
  	animation-timing-function: linear;
  	background: #170f11;
  	background: linear-gradient(to right, #332b2d 8%, #170f11 18%, #332b2d 33%);
}
@keyframes placeHolderShimmer {
  0% {
    background-position: 0px 0;
  }
  100% {
    background-position: 100em 0;
  }
}
.gridder-list > .gridder-item img {
    width: 100%;
    vertical-align: bottom;
    border-radius: 6px !important;
    cursor: pointer;
}
.gridder-item.active:before {
    content: "";
    border: 1px solid #f5d01c;
    position: absolute;
    top: -5px;
    left: -5px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border-radius: 10px;
}
.gridder-item.active img {
    -webkit-box-shadow:0px 0px 60px 9px rgba(247,206,24,0.9);
    -moz-box-shadow: 0px 0px 60px 9px rgba(247,206,24,0.9);
    box-shadow: 0px 0px 60px 9px rgba(247,206,24,0.9);
}
.gridder-item .js-tilt-glare {
    border-radius: 10px !important;
}
.gridder-bottom {
    color: #fff;
    position: relative;
}
.gridder-content {
    display: flex;
    gap: 20px;
    align-items: stretch;
    padding-top: 20px;
    margin-top: -20px;
}
.gridder-content .cartas, .gridder-content .texto {
    display: flex;
    gap: 20px;
    width: 50%;
}
.gridder-content .cartas a {
	position: relative;
}
.gridder-content .cartas div a:first-child:after {
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	background-image: url('../assets/preview-symbol.svg');
	right: 0;
	bottom: 0;
	background-color: #170f11;
	border-radius: 30px 0 11px 0;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 12px 12px;
}
.gridder-content .cartas img {
    width: 100%;
    border-radius: 12px;
    aspect-ratio: 183 / 289;
    display: block;
}
.gridder-content .cartas > div {
	text-align: center;
	width: 50%;
  	display: flex;
  	flex-direction: column;
  	gap: 5px;
  	position: relative;
}
.gridder-content .cartas > div:before {
	content: "";
	position: absolute;
	width: 20px;
  	aspect-ratio: 1;
  	border-radius: 50%;
  	border: 8px solid #f5d01c;
  	animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
    left: calc(50% - 10px);
	top: calc(50% - 10px);
	z-index: -1;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}
.gridder-content .cartas .download {
	color: #fff;
}
.gridder-content .cartas .download:before {
	content: "";
  	width: 16px;
  	height: 16px;
  	margin-right: 5px;
  	background-image: url("../assets/download-symbol.svg");
  	display: inline-block;
  	background-size: cover;
  	vertical-align: text-bottom;
}
.gridder-content .texto {
    flex-direction: column;
    overflow-y: scroll;
    max-height: 446px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    padding-right: 15%;
    border-radius: 12px;
    border: 1px solid #383838;
    gap:0;
    align-items: start;
}
.gridder-content .texto h3 {
    font-size: 27px;
    line-height: 29px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 20px;
}
.gridder-content .texto p {
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 20px;  
}
.gridder-content .texto p:last-child {
    margin-bottom: 0px;  
}
.gridder-content .texto .botao {
	background-color: #f5d01c;
	border-radius: 10px;
  	padding: 10px 25px 10px 40px;
  	font-weight: bold;
  	text-transform: uppercase;
  	letter-spacing: 2px;
  	text-decoration: none;
    color: #261A1D;
    transition: background-color 0.5s ease;
    font-size: 14px;
    background-image: url('../assets/download-symbol-preto.svg');
    background-size: 20px;
  	background-repeat: no-repeat;
  	background-position: 9px 7px;
}
.gridder-content .texto .botao:hover {
	background-color: #d1ae02;
}

.gridder-bottom .gridder-navigation {
    position: absolute;
    right: 0;
    top: 0;
}
.gridder-next,.gridder-prev {
    display: none;
}
.gridder-close {
    position: absolute;
    right: -15px;;
    top: 25px;
    width: 32px;
    height: 32px;
    opacity: 1;
    text-indent: -100px;
    overflow: hidden;
    background-color: #f5d01c;
    border-radius: 100px;
    cursor: pointer;
    z-index: 1;
}
.gridder-close:before, .gridder-close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 18px;
  width: 2px;
  background-color: #1c1416;
  top: 7px;
}
.gridder-close:before {
  transform: rotate(45deg);
}
.gridder-close:after {
  transform: rotate(-45deg);
}

.fullwidth.guitar {
	background-image:url('../assets/backgroung-guitar.svg');
	background-size: 108%;
  	background-repeat: no-repeat;
  	background-position: center;
}
.textoscentralizados {
	text-align: center;
}
.textoscentralizados h2 {
	font-size: 22px;
	line-height: 25px;
	color: #fff;
	text-align: center;
	margin-left: 240px;
	margin-right: 240px;
	letter-spacing: 3px;
	margin-bottom: 15px;
	font-weight: bold;
	margin-top:40px;
	color: #f5d01c;
	text-transform: uppercase;
}
.textoscentralizados p {
	font-size: 17px;
	line-height: 20px;
	color: #fff;
	text-align: center;
	margin-left: 240px;
	margin-right: 240px;
	letter-spacing: 3px;
	margin-bottom: 15px;
}
.textoscentralizados .botaocompartilhe {
	border: 3px solid #f5d01c;
  	border-radius: 15px;
  	padding: 20px 50px;
  	color: #f5d01c;
  	font-weight: bold;
  	text-transform: uppercase;
  	letter-spacing: 2px;
  	text-decoration: none;
  	margin-top: 45px;
  	display: inline-block;
}

.titulo {
  background-image: url('../assets/trilho-titulo.svg'), url('../assets/trilho-titulo.svg');
  background-position: left -200px center, right -200px center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto 65px;
}
.titulo .container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
}
.titulo .container img {
	width: 100%;
	width:300px;
}
.titulo .container div p.tit1 {
	color: #fff;
	font-size: 34px;
	font-weight: bolder;
	font-family: "acumin-pro-condensed";
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.titulo .container div h2 {
	color: #f5d01c;
	font-size: 73px;
	font-weight: 550;
	letter-spacing: 0;
	line-height: 61px;
	margin-bottom:10px;
}
.titulo .container div p.tit2 {
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	font-family: "acumin-pro-condensed";
	letter-spacing: 1px;
}

/* SIMPLE LIGHTBOX */
.simple-lightbox .sl-download {
	margin-bottom: 10px;
}
.simple-lightbox .sl-download a:before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 5px;
	background-image: url('../assets/download-symbol.svg');
	display: inline-block;
  	background-size: cover;
  	vertical-align: text-bottom;
}

/* ELEMENTOS PARALAX */
.elementoparalax.el1 {
	position: absolute;
	margin-left: -110px;
	margin-top: 200px;
	width:250px;
    -webkit-filter: blur(7px);
    -moz-filter: blur(7px);
    -o-filter: blur(7px);
    -ms-filter: blur(7px);
    filter: blur(7px);
    z-index: -1;
}
.elementoparalax.el2 {
	position: absolute;
	right:-240px;
	margin-right: 0px;
	margin-top: 620px;
	width:350px;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    z-index: -1;
}
.elementoparalax.el2.disco {
	margin-top: 200px;
}

/* FOOTER */
footer .entregamarcaeisenbahn {
	background-image: url('../assets/backgroung-entregamarca.png');
	height: 60px;
	bottom: 0;
	background-size: cover;
	background-position: center bottom;
	position: fixed;
	width: 100%;
	z-index: 3;
}
footer .entregamarcaeisenbahn .container {
	padding: 0;
	display: flex;
  	align-items: center;
  	justify-content: space-evenly;
}
footer .entregamarcaeisenbahn .logobillboard {
	width: 310px;
}
footer .entregamarcaeisenbahn .logoeisenbahn {
	width: 115px;
}
footer .entregamarcaeisenbahn .garrafaseisenbahn {
	height: 60px;
}
footer .entregamarcaeisenbahn .garrafaseisenbahnmobile {
	height: 60px;
	display: none;
}
footer .expediente {
	background-color: #f5d01c;
	text-align: center;
	padding-bottom: 60px;
}
footer .expediente strong {
	font-weight: bold;
}
footer .expediente h3 {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
}
footer .expediente p {
	letter-spacing: 1px;
	font-size: 12px;
}
footer .logorodape {
	text-align: center;
}
footer .logorodape img {
	width: 400px;
}
footer .spotify {
	text-align: center;
}
footer .spotify p {
	color: #f5d01c;
	font-size: 25px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	font-weight: bold;
}
footer .spotify img {
	width: 200px;
	margin-top: 20px;
	margin-bottom: 20px;
}


/* ACIMA DE 1500 - TELAS */
@media only screen and (min-device-width: 1500px) {
	.titulo {
		background-position: left -100px center, right -100px center;
		background-repeat: no-repeat, no-repeat;
		background-size: auto 75px;
	}
}

/* ABAIXO DE 960 - TABLET */
@media only screen and (max-device-width: 960px){
	body {
		background-size: contain;
		background-attachment:scroll
	}
	.container {
    	padding:20px;
	}
	.header {
	    text-align: center;
	    padding-top:50px;
	    padding-bottom:0px
	}
	.logo {
		width: 100% !important;
	}
    .gridder-content .cartas, .gridder-content .texto {
        width: 100%;
    }
    .gridder-content {
        align-items: flex-start;
        flex-direction: column;
    }
    .gridder-content {
        gap: 15px;
    }
    .gridder-content .cartas {
        gap: 15px;
    }
    .gridder-content .cartas img {
        width: 100%; /*calc(50% - 7.5px);*/
    }
    .gridder-content .texto {
        padding-right: 20px;
    }
	.gridder-content .texto h3 {
	    margin-bottom: 15px;
	}
	.gridder-content .texto p {
	    margin-bottom: 15px;  
	}
	.textoscentralizados h2 {
		margin-left: 50px;
		margin-right: 50px;
	}
	.textoscentralizados p {
		margin-left: 50px;
		margin-right: 50px;
	}
	.titulo {
	  	background-position: left -10px bottom 7px, right -61px top 8px;
	  	background-size: auto 45px;
	  	margin-top:20px;
	  	margin-bottom:20px;
	}

	.titulo .container {
		padding:7px !important;
		gap: 13px !important;
	}
	.titulo .container img {
		width: 239px;
	}
	.titulo .container .tit1 {
		font-size: 26px !important;
	}
	.titulo .container h2 {
		font-size: 58px !important;
    	line-height: 46px !important;
	}
	.titulo .container .tit2 {
		font-size: 17px !important;
	}
	.titulo .container div p.tit1 {
		margin-top: 20px;
	}

	.elementoparalax.el1 {
		margin-left: -50px;
		width:140px;
	}
	.elementoparalax.el2 {
		right: -90px;
		width: 230px;
	}
	.gridder-content .cartas .download {
		font-size: 16px;
	}
	footer .entregamarcaeisenbahn .garrafaseisenbahn {
		height: 60px;
		margin-right: -50px;
	}
	footer .entregamarcaeisenbahn .garrafaseisenbahnmobile {
		display: none;
	}
}

/* ABAIXO DE 700 - CELULAR */
@media only screen and (max-device-width: 700px) {
	.container {
    	padding:15px;
	}
	.header {
	    text-align: center;
	    padding-top:50px;
	    padding-bottom:0px
	}
	.textoscentralizados h2 {
		margin-left: 0px;
		margin-right: 0px;
	}
	.textoscentralizados p {
		margin-left: 0px;
		margin-right: 0px;
	}
	.titulo {
	  	background-position: left -45px bottom 0px, right -154px top 8px;
	  	background-size: auto 35px;
	  	margin-top:20px;
	  	margin-bottom:20px;
	}
	.titulo .container {
		padding:7px !important;
		gap: 13px !important;
	}
	.titulo .container img {
		width: 178px;
	}
	.titulo .container .tit1 {
		font-size: 20px !important;
	}
	.titulo .container h2 {
		font-size: 43px !important;
  		line-height: 36px !important;
	}
	.titulo .container .tit2 {
		font-size: 12px !important;
	}
	footer .entregamarcaeisenbahn {
		height: 50px;
	}
	footer .entregamarcaeisenbahn .garrafaseisenbahn {
		height: 40px;
		margin-right: -40px;
		margin-top:10px;
		display: none;
	}
	footer .entregamarcaeisenbahn .garrafaseisenbahnmobile {
		height: 40px;
		margin-right: -40px;
		margin-top:10px;
		display: inline;
	}
	footer .entregamarcaeisenbahn .logobillboard {
		width: 170px;
	}
	footer .entregamarcaeisenbahn .logoeisenbahn {
		width: 80px;
		margin-right: -30px;
	}
	footer .logorodape img {
	  width: 320px;
	}
}

/* ABAIXO DE 400 - CELULAR */
@media only screen and (max-device-width: 400px) {
	.titulo .container br {
		display: none;
	}
	.titulo .container {
		gap: 0px;
	}
	.titulo {
	  	background-position: left -72px bottom 0px, right -175px top 3px;
	}
	footer .entregamarcaeisenbahn .logobillboard {
		width: 120px;
	}
	footer .entregamarcaeisenbahn .logoeisenbahn {
		width: 60px;
		margin-right: -50px;
	}
	footer .entregamarcaeisenbahn .garrafaseisenbahnmobile {
		margin-right: -30px;
	}
}