@import url(font-opensans-condensed/stylesheet.css);
@import url(font-opensans-light/stylesheet.css);

:root {
  --color-primary: #2F71AF;
}

html, body, table, * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html, body, table {
 font-family: open_sanslight, Verdana, Helvetica, sans-serif;
 font-size: 12pt;
}

body {
 background-color: #222;
 color: #DDD;
}

a {
 color: var(--color-primary);
}

a:hover, a:active {
 color: red;
}

.container {
 max-width: 40rem;
 padding-bottom: 0;
 padding-left: 2rem;
 padding-right: 2rem;
 margin-left: auto;
 margin-right: auto;
}

.container-wide {
 max-width: 100%;
 padding-left: 3rem;
 padding-right: 3rem;
}


/*===========================================================================
  Encabezado
  ===========================================================================*/
body > header {
 display: block;
 padding-bottom: 1ex;
 background: var(--color-primary) url(header.png) no-repeat left top;
}


body > header ul {
 float: right;
}

body > header li {
 display: inline-block;
}

body > header li a {
 display: block;
 width: 100%;
 margin: 0;
 text-decoration: none;
 color: white;
 padding: 0.5ex 1.5ex;
 font-family: OpenSansCondensedLight, Arial, sans-serif;
 font-weight: bold;
 font-size: 120%;
 line-height: 120%;
 text-shadow: 0 0 20px black;
}

body > header li a.current {
 text-shadow: 0 0 10px yellow;
}


body > header li a:hover {
 border-radius: 8px;
 background-color: #FFDD36;
 color: var(--color-primary);
 text-shadow: 0 0 0;
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}

body > header nav {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 align-items: flex-end;
}


/*===========================================================================
  Pie de página
  ===========================================================================*/
body > footer {
 padding-top: 3ex;
 padding-bottom: 3ex;
 text-align: center;
 font-size: 80%;
 font-family: Verdana, sans-serif;
}

body > footer p {
 margin: 0;
 text-indent: 0;
}

body > footer ul {
 margin-bottom: 2ex;
}

body > footer li {
 display: inline-block;
 margin: 1ex 1em;
}

body > footer a {
 color: #DDD;
}

body > footer a:hover,
body > footer a:active {
 color: yellow;
}


/*===========================================================================
  Contenido artículos
  ===========================================================================*/
article, .hero-bg {
 color: #222;
 background: white;
}

article {
 padding-bottom: 2rem;
}

article > header {
 margin: 0;
 font-family: OpenSansCondensedLight, Arial, sans-serif;
 font-size: 150%;
 letter-spacing: 2pt;
 color: white;
 text-shadow: 0 0 14pt black;
 background: #FFB490 url(bg_title.jpg) repeat-x center center;
 padding-top: 1ex;
 padding-bottom: 1ex;
 margin-bottom: 2rem;
}

article img {
 max-width: 100%;
}

h2 {
 font-size: 13pt;
 margin-top: 46pt;
 color: #FF7736;
 letter-spacing: 1pt;
 text-shadow: 0 0 1px #BBB;
}


article ul, article ol {
 margin: 1ex 3em 2ex;
}

article ul {
 list-style-image: url(bullet-check-blue.gif);
}

ul.links {
 list-style-image: url(bullet-arrow1-blue.gif);
}


article li {
 margin-top: 1ex;
 margin-bottom: 2ex;
}

.compact li {
 margin-top: 0.5ex;
 margin-bottom: 0.5ex;
}


article p {
 margin-top: 2ex;
 margin-bottom: 2ex;
 text-indent: 1em;
 line-height: 160%;
}

article img {
 border-radius: 16px;
}

article img.right {
 float: right;
 margin-left: 1em;
}

article img.left {
 float: left;
 margin-right: 1em;
}

.col_2 li {
 width: 50%;
 float: left;
}

.copete {
 font-size: 16pt;
 color: #0F4172;
 text-shadow: 0 0 1ex #DDD;
 margin-top: 2ex;
 margin-bottom: 2ex;
}

.firma {
 text-align: right;
 font-style: italic;
}



/*===========================================================================
  Heros
*/

.hero-bg {
 background: url(/img/bg_herounit.jpg) no-repeat;
 background-size: cover;
 text-align: center;
 font-size: 160%;
 font-family: OpenSansCondensedLight, Arial, sans-serif;
}

.hero-bg img {
 max-width: 100%;
}

.hero-bg div {
 padding-top: 3ex;
 padding-bottom: 3ex;
}

.hero-bg p {
 margin-top: 1.5ex;
 margin-bottom: 1.5ex;
}


/*===========================================================================
  Tablas de costos
  ===========================================================================*/

.costos {
 margin: 2ex auto;
 border: 1px solid #FFDD36;
 border-collapse: collapse;
 border-radius: 8px;
}

.costos thead {
 background: #FFDD36;
}

.costos th,
.costos tbody td {
 border: 1px solid #FFDD36;
 padding: 1.5ex 1em;
}



/*===========================================================================
  Vías de contacto
  ===========================================================================*/
/*
body > footer .container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

body > footer ul {
 display: block;
 text-align: left;
 width: 50%;
}

body > footer .contacto span {
 display: none;
}
*/


.contacto .facebook {
 padding-left: 24px;
 background: url(facebook.png) no-repeat left center;
}

.contacto .twitter {
 padding-left: 24px;
 background: url(twitter.png) no-repeat left center;
}

.contacto .email {
 padding-left: 24px;
 background: url(email.png) no-repeat left center;
}

.contacto .tel {
 padding-left: 24px;
 background: url(telephone.png) no-repeat left center;
}

.contacto .sms {
 padding-left: 24px;
 background: url(phone.png) no-repeat left center;
}

.contacto .youtube {
 padding-left: 24px;
 background: url(youtube.png) no-repeat left center;
}

/*** Formulario de contacto ***/
.contacto a, .contacto a:link, .contacto a:visited {
 text-decoration: none;
}

.contacto a:hover {
 text-decoration: underline;
}


.contacto ul, .contacto form {
 margin: 1ex 1em;
}

.contacto li {
 display: block;
 margin-top: 1.5ex;
}

.contacto li span {
 display: inline-block;
 width: 5em;
}


.contacto .submit {
 margin: auto;
}

.contacto label {
 display: none;
}

label {
 margin: 1ex 0;
}

#boletacobrodigital {
 width: 60%;
 margin: 0 auto;
}

#boletacobrodigital input[type="text"] {
 margin: 1ex 0 3ex;
}


input[type="text"], textarea,
.contacto .text, .contacto textarea {
 border: 1px solid #AAA;
 border-radius: 4px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10pt;
 width: 100%;
 padding: 1ex 2ex;
 margin-left: auto;
 margin-right: auto;
}

.contacto .text {
 padding: 0.25ex 0.5ex;
}

.contacto textarea {
 margin-top: 0.5ex;
 padding: 0.25ex 0.5ex;
 height: 8ex;
 clear: both;
}

.contacto .izq, .contacto .der {
 float: left;
 width: 49%;
 margin-bottom: 1ex;
}

.contacto .izq {
 margin-right: 1%;
}

.contacto .der {
 margin-left: 1%;
}

.button_row {
 text-align: center;
 margin-top: 1ex;
 margin-bottom: 2ex;
}

/*** Bootstrap: Botones ***/
.btn {
    text-decoration: none;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    border-color: #E6E6E6 #E6E6E6 #B3B3B3;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 0;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
}
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    background-color: #E6E6E6;
}
.btn:active, .btn.active {
}
.btn:first-child {
}
.btn:hover {
    -moz-transition: background-position 0.1s linear 0s;
    background-color: #E6E6E6;
    background-position: 0 -15px;
    color: #333333;
    text-decoration: none;
}
.btn:focus {
    outline: thin dotted #333333;
    outline-offset: -2px;
}
.btn.active, .btn:active {
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: 0 none;
}
.btn.disabled, .btn[disabled] {
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: none;
    cursor: default;
    opacity: 0.65;
}
.btn-large {
    border-radius: 5px 5px 5px 5px;
    font-size: 15px;
    line-height: normal;
    padding: 9px 14px;
}
.btn-large [class^="icon-"] {
    margin-top: 1px;
}
.btn-small {
    font-size: 11px;
    line-height: 16px;
    padding: 5px 9px;
}
.btn-small [class^="icon-"] {
    margin-top: -1px;
}
.btn-mini {
    font-size: 11px;
    line-height: 14px;
    padding: 2px 6px;
}
.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active {
    color: rgba(255, 255, 255, 0.75);
}
.btn {
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-primary {
    background-color: #0074CC;
    background-image: -moz-linear-gradient(center top , #0088CC, #0055CC);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    background-color: #0055CC;
}
.btn-primary:active, .btn-primary.active {
}
.btn-warning {
    background-color: #FAA732;
    background-image: -moz-linear-gradient(center top , #FBB450, #F89406);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
    background-color: #F89406;
}
.btn-warning:active, .btn-warning.active {
}
.btn-danger {
    background-color: #DA4F49;
    background-image: -moz-linear-gradient(center top , #EE5F5B, #BD362F);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
    background-color: #BD362F;
}
.btn-danger:active, .btn-danger.active {
}
.btn-success {
    background-color: #5BB75B;
    background-image: -moz-linear-gradient(center top , #62C462, #51A351);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
    background-color: #51A351;
}
.btn-success:active, .btn-success.active {
}
.btn-info {
    background-color: #49AFCD;
    background-image: -moz-linear-gradient(center top , #5BC0DE, #2F96B4);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-color: #2F96B4;
}
.btn-info:active, .btn-info.active {
}
.btn-inverse {
    background-color: #414141;
    background-image: -moz-linear-gradient(center top , #555555, #222222);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
    background-color: #222222;
}
.btn-inverse:active, .btn-inverse.active {
}


/*** Bootstrap: Alertas ***/
.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 18px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.alert-heading {
  color: inherit;
}

.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 18px;
}

.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger,
.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}

.alert-block p + p {
  margin-top: 5px;
}


/*===========================================================================
  Grilla de programación
  ===========================================================================*/

.grilla_programacion {
 margin: auto;
 border-collapse: separate;
 text-align: center;
 font-family: Arial, sans-serif;
 font-size: 10pt;
 border-spacing: 1px;
 background-color: #2F71AE;
}

.grilla_programacion thead th {
 font-weight: bold;
 padding: 2.5ex 1ex;
 font-size: 10pt;
 text-transform: uppercase;
}

.grilla_programacion th {
 color: #FFF;
 background-color: #2F71AE;
 font-size: 8pt;
}

.grilla_programacion td {
 padding: 0.5ex 0.25ex;
 background-color: #F6F6F6;
 color: #666;
}

.grilla_programacion td:hover {
 background: yellow;
 color: #000;
}

.grilla_programacion td.vacio, .grilla_programacion td.vacio:hover {
 background: #DDD;
}

.grilla_programacion tbody tr:hover th {
 background-color: red;
 color: white;
}


/*===========================================================================
  Banners
  ===========================================================================*/

.banners {
 background: var(--color-primary);
}

.banners ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 padding-top: 3rem;
 padding-bottom: 3rem;
 gap: 1em;
}


.banners li {
 display: block;
}

.banners li img {
 background: white;
 border-radius: 8px;
 padding: 4px;
 height: 160px;
 width: 270px;
}


.stores {
 display: flex;
 justify-content: center;
 gap: 2rem;
 padding-bottom: 3ex;
 margin-bottom: 3ex;
}

.stores>div {
 width: calc(50% - 4rem);
 max-width: 20rem;
 background: white;
 padding: 2ex 2rem;
 text-align: center;
 border-radius: 8px;
}

.stores h2 {
 margin-top: 0;
 margin-bottom: 1ex;
}
