@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url("https://nworkforce.com/librerias/css/fonts/fonts.css");
@import url("https://nworkforce.com/librerias/css/bulma/bulma.min.css");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; color: white;}
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
a img { border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
*, :before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { background: white; font-family: "Roboto", sans-serif; color: white; }
sup { font-size: 50%; vertical-align: super; }
h3 { font-size: 30pt; }
h5 { font-size: 18pt; }
h6 { font-size: 16pt; }
img { width: 100%; max-width: 250px; height: auto; }

.verde { color: #76b900 !important; }
.fgb { font-family: "geforce-bold"; }
.fgl { font-family: "geforce-light"; }
.fgln { font-family: "geforce-light-notch"; }
.fgbn { font-family: "geforce-bold-notch"; }
.uppercase {text-transform: uppercase; }
.padding-bottom-20 { padding-bottom: 20px; }
.ancho-medio { width: 50%; }
.text-center { text-align: center; }
.tarjetas { margin: auto; }
.logos { max-height: 50px; max-width: 170px; }

#wrapper {
  position: relative;
  top: 0px;
  left: 0px;
  width: 970px;
  margin: auto;
  background-color: black;
  overflow: hidden; }
#wrapper.show { display: block; }
#banner {
  background: url(../img/banners.jpg) no-repeat center right;
  background-size: contain;
  width: 100%;
  padding: 2vw;
  display: flex;
  margin-bottom: 30px; }
.logos.mobile { display: none; }
#expe { display: flex; flex-wrap: wrap; justify-content:space-between; padding: 0 3vw; }
.card { width: calc(100%/3.5); padding: 10px; margin: 10px; background: transparent !important; color: white; }
.card img { border-radius: unset; -webkit-box-shadow: 0px 0px 15px 1px rgba(255,255,255,0.5); -moz-box-shadow: 0px 0px 15px 1px rgba(255,255,255,0.5); box-shadow: 0px 0px 15px 1px rgba(255,255,255,0.5); }
.card h6 { margin: 1vw 0; }
.card p { font-size: 90%; }
.card .foot { margin: 2vw 0; text-align: center; }
.card .head { text-align: center; }
.card .foot a { background-color: #76b900; border: 0; text-decoration: none; color: #fff; padding: 8px 20px; font-size: 90%; text-transform: uppercase; }


/* MOBILE SMALL */
@media only screen and ( max-width: 320px) {
  #wrapper { width: 100%; padding: 0 3vw; }
  .logos { display: none; }
  .logos.mobile { display: block; margin: 10px auto; }
  #banner { flex-direction: column-reverse; background-position: top right; background-size: 210%;}
  .columna { margin: auto; padding: 3vw; margin-bottom: 5vw ;}
  .ancho-medio { width: 80%; }
  .card { width: 80%; padding: 3vw; margin: auto; }
  .card .head { text-align: center; }
  .card .body { margin: 20px 0; }
  
  .modal-content { width: 90%; }
  .modal-close { position: relative; right: -42vw; top: -60vw; }
}
/* MOBILE BIG */
@media only screen and (min-width: 321px) and (max-width: 480px) {
  #wrapper { width: 100%; padding: 0 2vw; }
  .logos { display: none; }
  .logos.mobile { display: block; margin: 10px auto; }
  #banner { flex-direction: column-reverse; background-position: top right; background-size: 170%;}
  .columna { margin: auto; padding: 3vw; margin-bottom: 5vw ;}
  .ancho-medio { width: 80%; }
  .card { width: 80%; padding: 3vw; margin: auto; }
  .card .body { margin: 20px 0; }
  
  .modal-content { width: 90%; }
  .modal-close { position: relative; right: -42vw; top: -60vw; }
}  
/* PHABLET */
@media only screen and (min-width: 481px) and (max-width: 640px) {
  #wrapper { width: 100%; padding: 0 2vw; }
  .logos { display: none; }
  .logos.mobile { display: block; margin: 10px auto; }
  #banner { flex-direction: column-reverse; background-position: top right; background-size: 130%;}
  .columna { margin: auto; padding: 3vw; margin-bottom: 5vw ;}
  .ancho-medio { width: 80%; }
  .card { width: 80%; padding: 3vw; margin: auto; }
  .card .head { text-align: center; }
  .card .body { margin: 20px 0; }
  
  .modal-content { width: 90%; }
  .modal-close { position: relative; right: -42vw; top: -60vw; }
} 
/* TABLET PORTRAIT */
@media only screen and (min-width: 641px) and (max-width: 720px) {
  #wrapper { width: 100%; padding: 0 2vw; }
  .logos { display: none; }
  .logos.mobile { display: block; margin: 10px auto; }
  #banner { flex-direction: column-reverse; background-position: top right; background-size: 120%;}
  .columna { margin: auto; padding: 3vw; margin-bottom: 5vw ;}
  .ancho-medio { width: 80%; }
  .card { width: 80%; padding: 3vw; margin: auto; }
  .card .head { text-align: center; }
  .card .body { margin: 20px 0; }
  
  .modal-content { width: 70%; }
  .modal-close { position: relative; right: -36vw; top: -44vw;}
} 
/* TABLET LANDSCAPE */
@media only screen and (min-width: 721px) and (max-width: 960px) {
  .card { width: calc(100%/3.4); padding: 2vw; margin: 1vw; }
  
  .modal-content { width: 70%; }
  .modal-close { position: relative; right: -36vw; top: -44vw;}
}
/* Desktop BREAKPOINT */
@media only screen and (min-width: 961px) and (max-width: 1280px) {
  .card { width: calc(100%/3.4); padding: 2vw; margin: 1vw; }
}