/******************************************************************
Theme Name: La Gula del Norte 2016
Theme URI: 
Description: 
Author: Hermanos Clever & César Saiz
Author URI: 
Version: 0.1b
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support

License: WTFPL
License URI: http://sam.zoy.org/wtfpl/
Are You Serious? Yes.


MAKE SURE TO READ BELOW BEFORE GETTING STARTED FOR THE FIRST TIME!
------------------------------------------------------------------

You may be thinking…

WHOA, WHOA, WHOA…WHAT HAPPENED HERE?

But before you freak out, let me take a few minutes to explain.

Bones now uses Sass by default. If you prefer using regular CSS,
then feel free to modify this theme how you like and keep a copy
as your own personal starting point.

DON'T DISMISS IT JUST YET THOUGH, USING Sass ISN'T AS COMPLICATED AS YOU THINK.

It does take a few minutes to wrap your head around, but it will all
be worth it. Need a quick intro? Here are a few quick reads:

http://simplebits.com/notebook/2013/11/13/sass-book/ (BUY THIS)
http://cognition.happycog.com/article/preprocess-this
http://viget.com/inspire/sass-a-designers-perspective
http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
http://css-tricks.com/sass-style-guide/
http://net.tutsplus.com/tutorials/html-css-techniques/developing-with-sass-and-chrome-devtools/

I would HIGHLY RECOMMEND, if you are going to be working with Sass, that you work locally.
The browsers don't understand Sass and compiling it on the server takes a bit
of a setup.

That being said, here are a few MUST HAVE TOOLS for working with a
pre-processor: (You really only need one of them)

CodeKit: (Highly Recommended)
http://incident57.com/codekit/

Compass App: (Windows / Mac Users)
http://compass.handlino.com/

These applications compile Sass into valid CSS. This
way you can keep your production files easy to read and your
CSS minified and speedy. Simply set the output to the
library/css folder and you are all set. It's a thing of beauty.

You can also setup auto compiling with Grunt or using Terminal on
OSX. It's a bit complicated to setup so if you aren't familiar
with it, just get one of the automated applications.

---------------------------------------------------------------

Remember, once you download Bones it's up to you how to use it,
so go nuts. Set things up and develop in a way that's easiest for
you. If using Sass is still a bit confusing for you, then remove it
and customize this template as you see fit.

If you're a bit uneasy about using Sass or just want a familiar setup,
take a few minutes and think about how much better a developer you
can become by just TRYING out new technologies. It may be tough at
first but it WILL make you a better developer. TRUST ME ON THIS. Give
it a week, maybe two, and you will never go back.

If you STILL can't get on board and want to jump ship, that's cool.
Bones is not for everyone and that's ok, I mean I'm not hurt by it,
whatever, I never liked you anyway. Here are some other alternatives
if you're looking for a blank starter theme. I'll just be here waiting
by the window, in case you ever decide to come back.

http://roots.io/starter-theme (way more complex but has a ton of cool features)
http://html5reset.org (super clean and great markup)
https://github.com/viewportindustries/starkers (not sure if it's still active, but still good)

That's it. It's time to jump in and get your hands dirty.
Seriously, why are you still reading this? Get to work!
If you have any issues or problems, you can create an issue on github
or find me on Twitter: @eddiemachado (SHAMELESS PLUG!).

Happy Developing!

(When you're done, you may want to remove all this nonsense before
passing it along to your client.)

******************************************************************/

/*
WordPress Probz
So Theme Check (http://wordpress.org/plugins/theme-check/)
is constantly telling me that it needs these classes in the CSS even
though they are in the REAL stylesheet in library/css/style.css.
So we're gonna drop these here to keep it happy.
Great work, Theme Check (eye roll)
*/

.sticky {}          /* DO NOT EDIT THIS */
.gallery-caption {} /* THESE ARE USELESS */
.bypostauthor {}    /* THEY ARE ONLY TO KEEP THEME CHECK HAPPY */



#promociones #content #inner-content {
    max-width: none;
    width: 100%;
    padding-top: 0;
}
#promociones h1.page-title {
  text-align: center;
  padding: 0 24px;
}
#promociones #wrapper {
  /*display: flex;
    flex-wrap: wrap;*/
    float: left;
    clear: both;
    width: 100%;
    background-color: #fff;
}
#promociones h2,
#promociones .desc p,
#promociones .desc h3,
#promociones .bloque-form h3,
#promociones input {
  color: #002f6c; 
}
#promociones .promocion {
    width: 100%;
    margin: 90px auto;
    float: left;
    clear: both;
}

#promociones .promocion-reduce {
    width: auto;%;
    margin-left: 20%;
 
}
/*#promociones .promocion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
    float: left;
    clear: both;
}*/
#promociones .promocion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
    float: left;
    clear: both;
    /*align-items: center;*/
}
/*.bloque-img {
  grid-area: bloque-img;
}
.bloque-info {
  grid-area: bloque-info;
}
.bloque-form {
  grid-area: bloque-form;
}*/

#promociones .bloque-info {
    width: 100%;
    height: auto;
}
#promociones .bloque-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    width: 95%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
} 

#promociones .bloque-img2 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    width: 95%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
} 








#promociones .promo-imagenes-titulo img,
#promociones .bloque-img img{
    width: 100%;
    clear: both;
    float: none;
    max-height:80vh;


}

#promociones .promo-imagenes-titulo img,
#promociones .bloque-img2 img{
    width: auto;
    clear: both;
    float: none;
    
 
    

}
#promociones .promo-imagenes-titulo {
  display: block;
  width: 100%;
  float: left;
  clear: both;
}
#promociones .bloque-img img.panoramic{
    display: none;
}
#promociones .bloque-img2 img.panoramic{
    display: none;
}
#promociones .promo-imagenes-titulo .horizontal,
#promociones .bloque-img img.horizontal{
    display: inline;
}
#promociones .promo-imagenes-titulo .horizontal,
#promociones .bloque-img2 img.horizontal{
    display: inline;
    width: 65%;
       
}
}
#promociones .promo-imagenes-titulo .mobile,
#promociones .bloque-img img.vertical{
    display: none;
}
#promociones .promo-imagenes-titulo .mobile,
#promociones .bloque-img2 img.vertical{
    display: none;
    
}
}

#promociones .promo-imagenes-titulo {
  /* display: none; */
}
@media (min-width:1800px) {
  #promociones .bloque-img img.panoramic{
      display: inline;
  }
  #promociones .bloque-img2 img.panoramic{
      display: inline;
      height: 560px;
      width: 50%;
   
  }
  #promociones .bloque-img img.horizontal{
      display: none;
  }
   #promociones .bloque-img2 img.horizontal{
      display: none;
  }
  #promociones .promo-imagenes-titulo .mobile,
  #promociones .bloque-img img.vertical{
      display: none;
  }
   #promociones .bloque-img2 img.vertical{
      display: none;
  }
}

@media (max-width:950px) {
  #promociones .bloque-img img.panoramic{
      display: none;
  }
   #promociones .bloque-img2 img.panoramic{
      display: none;
  }
  #promociones .promo-imagenes-titulo .horizontal,
  #promociones .bloque-img img.horizontal{
      display: none;
  }
   #promociones .promo-imagenes-titulo .horizontal,
  #promociones .bloque-img2 img.horizontal{
      display: none;
  }
  #promociones .promo-imagenes-titulo .mobile,
  #promociones .bloque-img img.vertical{
      display: inline;
  }
  #promociones .promo-imagenes-titulo .mobile,
  #promociones .bloque-img2 img.vertical{
      display: inline;
      width: 100%;
  }
}
#promociones .bloque-info .img-mobile {
  display: none;
}
#promociones .bloque-info .promo-content {
  padding: 0 80px 0px 0px;
}
#promociones .bloque-form {
  padding: 0;
    display: block;
    width: 100%;
    overflow: hidden;
    padding-top: 50px;
}
#promociones .bloque-form .form-container {
  padding: 10px 80px 80px 80px;
    position: relative;
}
/* esto va bien en 1201px + */
#promociones .bloque-form .form-container:after {
    content: '';
    position: absolute;
    display: block;
    bottom: -200px;
    right: 0;
    border-left: 235px solid transparent;
    border-top: 235px solid transparent;
    border-bottom: 235px solid #00205b;
    border-right: 235px solid #00205b;
    transform: rotate(25deg);
    z-index: -1;
}

#promociones .bloque-form div.wpcf7,
#promociones #mc_embed_signup {
    margin: 0 auto;
    padding: 0;
    max-width: 1130px;
    line-height: 1.2;
}
#promociones .bloque-info .promo-content h2 {
  background-color: #fed141;
    padding: 2px 6px;
    display: inline-block;
    clear: both;
    margin: 0 0 24px;
}
#promociones .bloque-info .promo-content .desc {
  line-height: 1.5;
  margin-bottom: 24px;
}
#promociones form {
  display: grid;
  clear: both;
}
#promociones form .col2{
  display: flex;
}
#promociones form .col1 {
    margin: 10px 0;
    position: relative;
}
#promociones form .col1.submit {
  height: 0;
}
#promociones tr{
    width: 50%;
    display: block;
    float: left;
}
#promociones form .col2 > div{
    width: 50%;
    display: block;
    float: left;
}
#promociones form .col2 .col21 {
    margin-right: 10%;
}
#promociones td,
#promociones label {
    width: 100%;
    display: block;
    padding: 0;
    color: #002f6c;
    line-height: 1;
}

#promociones td.label,
#promociones label {
    padding: 0 12px 2px 0;
}
#promociones td.label,
#promociones label {
    padding: 0;
    clear: both;
}
#promociones input[type="text"], 
#promociones input[type="email"]{
    background-color: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #00205b;
    width: 100%;
    margin-bottom: 20px;
    padding: 3px 6px 6px;
}
#promociones input[type="text"]:focus,
#promociones input[type="email"]:focus{
    border-bottom: 1px solid #00205b;
    margin-bottom: 21px;
    
}
#promociones input[type="file"] {
    border: 0;
    background: none;
    color: transparent;
}
#promociones input[type="checkbox"] {
  padding: 7px;
}
#promociones input.btn_sumbit,
#promociones input[type="submit"] {
  display: block;
    width: auto;
    padding: 15px 40px !important;
    height: auto;
    border: 0;
    border-radius: 0 !important;
    font-size: 1em;
    font-weight: bold;
    width: auto;
    margin-top: 20px;
    background: #fed141;
    color: #00205b;
    margin-left: 0;
    position: absolute;
    right: 0;
    outline: none !important;
}
#promociones input.btn_sumbit {
    line-height: 32px;
    margin: 0 5px 10px 0;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: static;
    float: right;
}
#promociones input.btn_sumbit[disabled="disabled"] {
   cursor: not-allowed;
}
#promociones .your-receipt {
    height: 10px;
    display: block;
}
#promociones .your-receipt input[type="file"] {
 width: 0.1px;
 height: 0.1px;
 opacity: 0;
 overflow: hidden;
 position: absolute;
 z-index: -1;
}
#promociones label#lbl-your-receipt {
    background-color: #d3d0d0;
    transition: all .5s;
    cursor: pointer;
    padding: 12px 30px !important;
    width: auto;
    display: inline-block;
}


#promociones form .col1.lopd {
    font-size: 14px;
    line-height: 1.5;
    text-transform: none;
    margin: 2px 0;
}

#promociones form .col1.lopd  span.wpcf7-list-item {
    margin: 0;
}
#promociones form .col1.lopd  span.wpcf7-list-item.last{
  margin: 0 0 0 1em;
}

#promociones form .col1.lopd a{
    text-decoration: underline;
}
#promociones a.enlace-bbll {
  font-style: italic;
  text-decoration: underline;
}

#promociones #promociones_finalizadas {
    display: block;
    height: auto;
    margin-bottom: 60px;
    width: 100%;
    padding: 0 80px;
    float: left;
}
#promociones_finalizadas .container {
  display: grid;
  grid-template-columns: 50% 50%;
}
#promociones #promociones_finalizadas h2 {
    text-align: center;
    display: block;
    padding: 0 80px 0px;
    margin-top: 0;
    margin-bottom: 30px;
    background: none;
}
#promociones h2,
#promociones h3 {
    color: #002f6c;
    font-weight: bold;
}
#promociones #promocion_2,
#promociones #promocion_3 {
    width: 100%;
    margin-top: 0;
    height: 100%;
    vertical-align: top;
    position: relative;
}
#promociones #promocion_3 .bloque-info .promo-content {
  padding: 0 0 0 80px;
}
#promocion_2:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    top: 28%;
    bottom: 16%;
    color: darkblue;
    border-left: 1px solid darkblue;
}
#promociones #promociones_finalizadas .promocion-grid {
    display: block;
}
#promociones #promociones_finalizadas .btn-promo {
    display: none;
}
#promociones_finalizadas .promocion.imagen img {
  max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    margin: 10% auto 0;
    display: block;
}
.btn-promo {
    display: block;
    clear: both;
}
.btn-promo a {
    display: inline-block;
    clear: both;
    text-decoration: none;
    margin-top: 12px;
    margin-bottom: 24px;
    padding: 6px 8px;
    background: #00205b;
    color: #fff;
}

.your-email2 {
    display: none;
}
.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
#promociones .margin-top-90 {
  margin-top: 90px;
}
#promociones .wpcf7-validation-errors,
#promociones .wpcf7-acceptance-missing {
  border-color: #fed141;
}
#promociones ul {
    list-style-type: disc;
    padding-left: 1em;
}
#promociones ul li {
    margin-bottom: 5px;
}
#promociones .participa {
    font-weight: bold;
    font-size: 30px;
}
#promociones br,
#promociones p:empty {
    display: none;
}
#promociones #mc_embed_signup  {
    font-family: lucasreg;
    font-size: 1em;
    background: transparent;
    float: left;
    width: 100%;
}
#promociones #mc_embed_signup .indicates-required {
    font-size: 14px;
    margin-bottom: 24px;
}
#promociones #mc_embed_signup .mc-field-group.col-izqd {
    width: 45%;
    display: inline-block;
    margin-right: 10%;
    clear: none;
    float: left;
}
#promociones #mc_embed_signup .mc-field-group.col-dcha {
    width: 40%;
    position: relative;
    display: inline-block;
}
#promociones #mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
    border: 1px solid #e85c41;
}
#promociones #WebToLeadForm input[type=checkbox],
#promociones #mc_embed_signup input[type=checkbox] {
    margin-right: 6px;
    position: relative;
    top: 1px;
}
#promociones #WebToLeadForm input[type=checkbox] + label {
    display: inline;
}
#promociones #WebToLeadForm .upload_file label {
  display: inline;
  margin-right: 6px;
}
#promociones .form-row.upload_file {
  overflow: hidden;
}
#promociones #WebToLeadForm .upload_file input {
  color: #002f6c;
  max-width: calc(100% - 30px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#promociones input#mc-embedded-subscribe {
    position: static;
    float: right;
    background-color: rgb(245, 170, 195);
}

#promociones input#mc-embedded-subscribe[disabled="disabled"] {
    cursor: not-allowed;
}
#promociones #promo-botones .promo-success-response {
    font-weight: bold;
    font-size: 1.2em;
}
#promociones #promo-botones  a {
    display: inline-block;
    width: auto;
    float: left;
    margin-top: 20px;
    font-size: 1.1em;
    text-decoration: none;
    background: rgb(245, 170, 195);
    padding: 6px 12px;
}
#promociones #promo-botones a:last-child {
    margin-left: 24px;
}
#promociones #WebToLeadForm .form-row {
    width: 100%;
    float: left;
    clear: both;
    margin-bottom: 12px;
}
#promociones #WebToLeadForm select {
    max-width: 100%;
    border-left: 0;
    border-top: 0;
    border-radius: 0;
    border-right: 0;
    border-bottom: 1px solid #00205b;
    margin-bottom: 20px;
    padding: 3px 6px 6px;
    color: #00205b;
    font-family: "Merriweather Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.9px;
}

#promocion_1.izqd {
    margin-top: 0;
}

#promociones .btn-promo-ganadores {
    padding-top: 24px;
    display: block;
    clear: both;
    text-align: center;
}
#promociones .btn-promo-ganadores a {
    display: inline-block;
    background: #fed141;
    font-weight: bold;
    line-height: 32px;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 15px 40px !important;
    height: auto;
    width: auto;
    border: 0;
    border-radius: 0 !important;
    text-decoration: none;

}
@media (max-width: 580px) {
    #promociones #WebToLeadForm .column-half {
        width: 100%;
        clear: both;
    }
    #promociones #WebToLeadForm select {
        width: 100%;
    }
}

@media (max-width: 864px) {
    #promociones input#mc-embedded-subscribe {
        float: none;
        margin-left: auto;
        margin-right: auto;
        padding: 15px 28px !important;
        white-space: normal;
    }
}

@media (min-width:1590px) {
  #promociones_finalizadas .promocion.imagen img {
      margin: 0 auto 0;
    }
}
@media (max-width:1200px) {
  #promociones .bloque-info .promo-content {
      padding: 0 30px 0px 0;
  }
  #promociones .bloque-form .form-container {
      padding: 40px 30px 70px 40px;
  }
}
@media (max-width:864px) {
  #promociones .bloque-info .promo-content {
      padding: 0 30px 0px 40px;
  }
  #promociones .promocion {
      margin: 36px auto;
  }
  #promociones .promocion-grid {
      display: block;
  }
  #promociones .bloque-img {
    display: none;
  }
  #promociones .bloque-img2 {
    display: none;
  }
  #promociones .bloque-info .img-mobile {
    display: block;
  }
  #promociones .bloque-info .img-mobile img{

    width: 100%;
  }
  #promociones form .col2{
    display: block;
  }
  #promociones form .col2 > div{
      width: 100%;
  }
  #promociones input[type="text"], 
  #promociones input[type="email"] {
    width: 100%;
    margin-right: 0;
  }
  #promociones input[type="submit"] {
    right: 14px;
    top: -8px;
  }
  #promociones label#lbl-your-receipt {
      text-align: center;
      width: 100%;
  }
  #promociones #promociones_finalizadas {
    display: block;
    padding: 0;
  }
  #promociones_finalizadas .container {
    display: block;
    padding: 0 24px;
  }
  #promociones #promocion_2,
  #promociones #promocion_3 {
    display: block;
    width: 100%;
    margin-bottom: 0px;
    float: left;
    clear: both;
  }
  #promociones #promocion_2:after {
    content: none;
  }
  #promociones #promociones_finalizadas h2 {
    padding: 0 0 20px;
  }
  #promociones_finalizadas .promocion.imagen img {
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto 60px;
  }
  #promociones #promociones_finalizadas .bloque-info .promo-content {
    padding: 0 0 20px 0 !important;
  }
}
.cat-receta{
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 500px) {
  #promociones h1.page-title {
    font-size: 34px;
  }
}
#promociones #inner-content .promocion[data-id="2865"] h2,
#promociones #inner-content .promocion[data-id="2137"] h2 {
  display: none;
}
#promociones #inner-content .promocion[data-id="2865"] .promocion-grid,
#promociones #inner-content .promocion[data-id="2137"] .promocion-grid {
  align-items: initial;
}

/* Clase creada para la promocion de los 500€ menusales, la imagen */

.panoramic-reduce{
    width: auto;
    margin-left: 20%;
}

#promociones .horizontal-reduce{
    width: auto;
    margin-left: 20%;
}

.panoramic-reduce{
    width: auto;
    margin-left: 20%;
}