/* FONTS */
@import url("https://nworkforce.com/librerias/css/fonts/fonts.css");

:before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { background-color: #000; }
body { font: "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;}
.legal { font-size: x-small; color: #666; display: block;  }
label { white-space: nowrap; }
.cursor { cursor: pointer; }
.italic { font-style: italic; }

.bigtitle { font-size: 280% !important; }
.bigsubtitle { font-size: 180%; }

.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-40 { margin-top:40px; }
.mt-60 { margin-top:60px; }
.mt-90 { margin-top:90px; }

.mt-5v { margin-top: 5vw !important; }
.mt-10v { margin-top: 10vw !important; }

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

.mb-5v { margin-bottom: 5vw !important; }
.mb-10v { margin-bottom: 10vw !important; }

.mr-10p { margin-right:10%; }

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

.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; }
.logosdlss { 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"; }

.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 { padding: 0 5% 1.5%; }

.button { font-weight: bolder; text-transform: uppercase; background-color: #76b900; border: 1px solid #76b900; color: #fff; border-radius: 0px;}
.button:visited { color: #fff; background-color: #76b900; }
.button:hover { color: #76b900; background-color: transparent; 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; }
.bundle { background: rgb(84,86,106); background: linear-gradient(0deg, rgba(84,86,106,1) 0%, rgba(0,0,0,1) 100%); margin-top: 5px; }
.bundle img { position: relative; bottom: -18px; }
.bundle .imgBundleMobile { display: none; }


.bundle ul li { margin-left: 1em; } 
.bundle ul li::before { content: ">"; color: rgb(118, 185, 0); font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }

.card { background-color: unset; box-shadow: unset; color: unset; }
.card .card-content { color: #fff; padding-top: 0; padding-bottom: 0; font-size: 86%; }
.card .card-footer { border: unset; padding-top: 20px; }
.card .card-footer .button,
.card .card-footer .button:visited,
.card .card-footer .button:hover,
.card .card-footer .button:active,
.card .card-footer .button:focus { color: #fff; background-color: #76b900; font-weight: bolder; text-transform: uppercase; flex-grow: 0; margin: auto; border-radius: 0px; } 


.shopping { padding-top: 5%; }
.shopping .tile p.is-small { width: 80%; margin: auto; }

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

.modal { z-index: 999; }
/* .modal-close { position: relative; right: -334px; top: -400px; } */
.modal-content { width: 50%; }

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

  .header { background: url("../img/header_mobile.png") no-repeat top center; background-size: 100%; padding-top: 85vw; }
  .header .is-pulled-right { float: unset !important; margin-left: -8px; }
  h3.title,
  .tile .title { font-size: 200% !important;  }
  .tile .subtitle { font-size: 140%; padding: 3% 5%; }
  
  .bundle img { position: relative; bottom: -18px; }
  .bundle .imgBundle { display: none;}
  .bundle .imgBundleMobile { display: block; }  

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

  .header { background: url("../img/header_mobile.png") no-repeat top center; background-size: 100%; padding-top: 85vw; }
  .header .is-pulled-right { float: unset !important; margin-left: -8px; }
  h3.title,
  .tile .title { font-size: 220% !important;  }
  .tile .subtitle { font-size: 140%; padding: 3% 5%; }

  .bundle img { position: relative; bottom: -18px; }
  .bundle .imgBundle { display: none;}
  .bundle .imgBundleMobile { display: block; } 

  .w60 { width: 100%; }
  .card-image { max-width: 300px; margin: auto; }
  .modal-content { width: 90%; }
}  
/* PHABLET */
@media only screen and (min-width: 481px) and (max-width: 640px) {
  .notification { padding: 0; }

  .header { background: url("../img/header_mobile.png") no-repeat top center; background-size: 100%; padding-top: 75vw; }
  .header .is-pulled-right { float: unset !important; margin-left: -8px; }
  h3.title,
  .tile .title { font-size: 250% !important;  }
  .tile .subtitle { font-size: 140%; padding: 3% 5%; }

  .bundle img { position: relative; bottom: -18px; }
  .bundle .imgBundle { display: none;}
  .bundle .imgBundleMobile { display: block; } 

  .w60 { width: 80%; }
  .card-image { max-width: 300px; margin: auto; }
  .modal-content { width: 70%; }
} 
/* TABLET PORTRAIT */
@media only screen and (min-width: 641px) and (max-width: 720px) {
  .notification { padding: 0; }
  .header { padding-top: 40%; background-position: top center; }
  
  .shopping .tile p.is-small { width: 100%; margin: auto; }
  .shopping .card .card-image { max-width: 300px; margin: auto; }
  
  .modal-content { width: 70%; }
} 
/* TABLET LANDSCAPE */
@media only screen and (min-width: 721px) and (max-width: 960px) {
  .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%; }
}