/* FONTS */
@font-face {
font-family: 'geforce-bold';
src: url("../assets/fonts/geforce_bold-webfont.eot") format("eot");
/* IE9 Compat Modes */
src: url("../assets/fonts/geforce_bold-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/geforce_bold-webfont.woff") format("woff");
/* Pretty Modern Browsers */
font-style: normal;
font-weight: bold; }
@font-face {
font-family: 'geforce-light';
src: url("../assets/fonts/geforce_light-webfont.eot") format("eot");
/* IE9 Compat Modes */
src: url("../assets/fonts/geforce_light-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/geforce_light-webfont.woff") format("woff");
/* Pretty Modern Browsers */
font-style: normal;
font-weight: lighter; }
@font-face {
font-family: 'geforce-bold-notch';
src: url("../assets/fonts/geforce-bold-alt-webfont.eot");
/* IE9 Compat Modes */
src: url("../assets/fonts/geforce-bold-alt-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/geforce-bold-alt-webfont.woff2") format("woff2"), url("../assets/fonts/geforce-bold-alt-webfont.woff") format("woff");
/* Pretty Modern Browsers */
font-style: normal;
font-weight: bold; }
@font-face {
font-family: 'geforce-light-notch';
src: url("../assets/fonts/geforce-light-alt-webfont.eot");
/* IE9 Compat Modes */
src: url("../assets/fonts/geforce-light-alt-webfont.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/geforce-light-alt-webfont.woff2") format("woff2"), url("../assets/fonts/geforce-light-alt-webfont.woff") format("woff");
/* Pretty Modern Browsers */
font-style: normal;
font-weight: lighter; }
@font-face {
font-family: 'DINPro';
src: url("../assets/fonts/DINWebPro.eot");
/* IE9 Compat Modes */
src: url("../assets/fonts/DINWebPro.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/DINWebPro.woff") format("woff");
/* Pretty Modern Browsers */ }
@font-face {
font-family: 'DINProMedium';
src: url("../assets/fonts/DINWebPro-Medium.eot");
/* IE9 Compat Modes */
src: url("../assets/fonts/DINWebPro-Medium.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/DINWebPro-Medium.woff") format("woff");
/* Pretty Modern Browsers */ }
@font-face {
font-family: 'DINProLight';
src: url("../assets/fonts/DINWebPro-Light.eot");
/* IE9 Compat Modes */
src: url("../assets/fonts/DINWebPro-Light.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/DINWebPro-Light.woff") format("woff");
/* Pretty Modern Browsers */ }

:before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { background-color: #000; }
body { font: 100%/1.4 "DINPro", "Trebuchet MS", Helvetica, sans-serif; color: #fff; margin: 0; padding: 0; }
sup { font-size: 0.5em !important; vertical-align: super; top: -0.5px; }
hr { width: 100%; border: 1px solid #666; margin: 1.5rem auto;}
label { font-size: x-small; color: #666; display: block; text-align: right; }
.blk { white-space: nowrap; }

.w60 { width: 60%; }
.w80 { width: 80%; }

.pb-less { padding-bottom: 0 !important; }
.pt-less { padding-top: 0 !important; }
.pv-less { padding-top: 0 !important; padding-bottom: 0 !important; }
.mb-less { margin-bottom: 0 !important; }
.mt-less { margin-top: 0 !important; }
.mt-10 { margin-top:10px; }
.mt-20 { margin-top:20px; }
.mt-30 { margin-top:30px; }
.mt-60 { margin-top:60px; }
.mt-90 { margin-top:90px; }

.mb-10 { margin-bottom:10px; }
.mb-20 { margin-bottom:20px; }
.mb-30 { margin-bottom:30px; }
.mb-60 { margin-bottom:60px; }
.mb-90 { margin-bottom:90px; }
.mb-120 { margin-bottom:120px; }

.pb-10 { padding-bottom: 10px; }
.pr-10 { padding-right: 10px; }
.pl-10 { padding-left: 10px; }
.pt-10 { padding-top: 10px; }

.border { border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; }
.container-m { max-width: 1300px; margin: auto; }
.notification { background-color: transparent; padding-top: 0; }
.box { background: transparent; box-shadow: unset;}
.subtitle sup { font-size: 0.5em; }

.logos { max-height: 50px; max-width: 170px; }
.cgreen { color: #76b900 !important; }
.cwhite { color: #fff !important; }
.fgeforceb { font-family: "geforce-bold"; }
.fgeforcel { font-family: "geforce-light"; }
.notchL { font-family: "geforce-light-notch"; }
.notchB { font-family: "geforce-bold-notch"; }

.onlymobile { background-color: #1f1f1f; box-shadow: 5px 10px 8px black; position: relative; z-index: 9999; align-items: center; justify-content: center;}
.onlymobile.columns { display: none; margin: 0px -1px 0px; right: 0; left: 0; top: 0;}

.tile .title { font-size: 219%; line-height: 100%; padding: 0 5%; margin: 0 0 1.25rem; }
.tile .subtitle { font-size: 180%; line-height: 100%; padding: 0 5%; margin: 0 0 0.25rem; text-align: unset;}
.tile .is-small { color: #fff; padding: 0 5% 1.5%; }

.button { font-weight: bolder; text-transform: uppercase; background-color: #76b900; border: 1px solid #76b900; color: #fff; }
.button:visited { color: #fff; background-color: #76b900; }
.button:hover { color: #76b900; background-color: transparent; border-radius: 5px; border-color: #76b900; }
.button:active, .button:focus { color: #fff; background-color: #76b900; border-color: #76b900; }

.header { background: url("../img/header.png") no-repeat center right; background-size: contain; z-index: 1; }
.grafica { background: url("../img/fondo_cmpt.png") no-repeat top right; background-size: contain; }

.shopping { padding-top: 5%; }
.shopping .tile p.is-small { width: 80%; margin: auto; }
.shopping .card { background-color: unset; box-shadow: unset; color: unset; }
.shopping .card .card-content { color: #fff; padding-top: 0; padding-bottom: 0; font-size: 86%; }
.shopping .card .card-footer { border: unset; }
.shopping .card .card-footer .button {  color: #fff; background-color: #76b900; font-weight: bolder; text-transform: uppercase;  } 
.shopping .card .card-footer .button:visited { color: #fff; background-color: #76b900; }
.shopping .card .card-footer .button:hover { color: #76b900; background-color: transparent; border: 1px solid #76b900; border-radius: 5px; }
.shopping .card .card-footer .button:active,
.shopping .card .card-footer .button:focus { color: #fff; background-color: #76b900; }

footer { margin: 4% 16% 8%; font: 70% "DINPro"; color: rgba(255, 255, 255, 0.5); }
footer img { max-width: 200px;  max-height: 55px; margin: auto; }
footer .line { margin: 0 0 4%; background: url("../img/gline.svg") center center no-repeat; height: 37px; background-size: contain; }
footer .image img { height: 50px; width: auto; }

/* MOBILE SMALL */
@media only screen and ( max-width: 320px) {
  label { padding-left: 2%; }
  .notification { padding: 0; }

  .header { background: url("../img/header_mobile.png") no-repeat top center; background-size: 100%; padding-top: 220px; }
  .header .is-pulled-right { float: unset !important; }
  .tile .title { font-size: 180%;  }
  .tile .subtitle { font-size: 140%; padding: 3% 5%; }
  .logosort { position: absolute; top:197px; width: 100%; display: flex;}
  .logosort img { max-width: 240px; }

  .grafica { padding-top: 90px; }
  .grafica .box { padding: 2%; }
  .grafica .w80 { width: 120%; }

  .w60 { width: 100%; }
}
/* MOBILE BIG */
@media only screen and (min-width: 321px) and (max-width: 480px) {
  label { padding-left: 5%; }
  .notification { padding: 0; }

  .header { background: url("../img/header_mobile.png") no-repeat top center; background-size: 120%; padding-top: 70vw; }
  .header .is-pulled-right { float: unset !important; }

  .tile .subtitle { padding: 3% 5%; }
  .logosort { position: absolute; top:56vw; width: 100%; display: flex; }
  .logosort img { max-width: 270px; margin: auto; max-height: unset; }

  .grafica { padding-top: 35vw; }
  .grafica .box { padding: 2%; }
  .grafica .w80 { width: 120%; }

  .w60 { width: 100%; }

  .card-image { max-width: 300px; margin: auto; }
}  
/* PHABLET */
@media only screen and (min-width: 481px) and (max-width: 640px) {
  label { padding-left: 5%; }
  .notification { padding: 0; }

  .header { background: url("../img/header_mobile.png") no-repeat top center; background-size: 120%; padding-top: 70vw; }
  .logosort { position: absolute; top:56vw; width: 100%; display: flex; }
  .logosort img { max-width: 300px; margin: auto; max-height: unset; }

  .onlymobile.columns { display: flex; } 
  .remove-logo { display: none; }

  .grafica { padding-top: 35vw; }
  .grafica .box { padding: 2%; }
  .grafica .w80 { width: 120%; }

  .w60 { width: 80%; }

  .card-image { max-width: 300px; margin: auto; }
} 
/* TABLET PORTRAIT */
@media only screen and (min-width: 641px) and (max-width: 720px) {
  label { padding-left: 5%; }
  .notification { padding: 0; }
  .header { padding-top: 40%; background-position: top center; }
  .grafica { padding-top: 35vw; }
  .shopping .tile p.is-small { width: 100%; margin: auto; }
  .shopping .card .card-image { max-width: 300px; margin: auto; }
  .modal-content { width: 90%; }
} 
/* TABLET LANDSCAPE */
@media only screen and (min-width: 721px) and (max-width: 960px) {
  label { padding-left: 5%; }
  .notification { padding: 0; }
  .header { padding-top: 20px; background-position: top right; }
  .header .is-half-tablet { width: 50%;}
  .shopping .tile p.is-small { width: 90%; margin: auto; }
  .shopping .card .card-image { max-width: 300px; margin: auto; }
  .modal-content { width: 70%; }
}
/* Desktop BREAKPOINT */
@media only screen and (min-width: 961px) and (max-width: 1280px) {
  .notification { padding: 0; }
  .header { background-position: top right; }
  .shopping .tile p.is-small { width: 90%; margin: auto; }
  .shopping .card .card-image { max-width: 300px; margin: auto; }
  .modal-content { width: 70%; }
}