/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

@font-face {
  font-family: 'Appareo-Medium';
  src: url('../fonts/Appareo-Medium.eot?#iefix') format('embedded-opentype'),  url('../fonts/Appareo-Medium.woff') format('woff'), url('../fonts/Appareo-Medium.ttf')  format('truetype'), url('../fonts/Appareo-Medium.svg#Appareo-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
    width: 100%;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
section {
    height: 100vh;
    padding-top: 5%;
}



/** 
 * iPad with portrait orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){

  section {
    height: 1024px;
 
    }
    section:nth-child(1)  {
    height: 500px;
     margin-bottom: 25% !important;
  }
   section:nth-child(2)  {
    height: 500px;
     margin-bottom: 33% !important;
  }
     section:nth-child(3)  {
    height: 500px;
     margin-bottom: 25% !important;
  }
   section:nth-child(4)  {
    height: 500px;
     margin-bottom: 23% !important;
  }
  section:nth-child(5)  {
    height: 500px;
     margin-bottom: 19% !important;
  }
  section:nth-child(6)  {
    height: 500px;
     margin-bottom: 20% !important;
  }
}

/** 
 * iPad with landscape orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
  section  {
    height: 768px;
  }
  section:nth-child(1)  {
    height: 500px;
     margin-bottom: 25% !important;
  }
   section:nth-child(2)  {
    height: 500px;
     margin-bottom: 33% !important;
  }
     section:nth-child(3)  {
    height: 500px;
     margin-bottom: 25% !important;
  }
   section:nth-child(4)  {
    height: 500px;
     margin-bottom: 23% !important;
  }
  section:nth-child(5)  {
    height: 500px;
     margin-bottom: 19% !important;
  }
  section:nth-child(6)  {
    height: 500px;
     margin-bottom: 20% !important;
  }
}

/**
 * iPhone 5
 * You can also target devices with aspect ratio.
 */
@media screen and (device-aspect-ratio: 40/71) {
  section:nth-child(1)  {
    height: 500px;
     margin-bottom: 25% !important;
  }
   section:nth-child(2)  {
    height: 500px;
     margin-bottom: 33% !important;
  }
     section:nth-child(3)  {
    height: 500px;
     margin-bottom: 25% !important;
  }
   section:nth-child(4)  {
    height: 500px;
     margin-bottom: 23% !important;
  }
  section:nth-child(5)  {
    height: 500px;
     margin-bottom: 19% !important;
  }
  section:nth-child(6)  {
    height: 500px;
     margin-bottom: 20% !important;
  }
}

@media screen and (max-width: 736px) {
      section:nth-child(1)  {
    height: 500px;
     margin-bottom: 25% !important;
  }
   section:nth-child(2)  {
    height: 500px;
     margin-bottom: 33% !important;
  }
     section:nth-child(3)  {
    height: 500px;
     margin-bottom: 25% !important;
  }
   section:nth-child(4)  {
    height: 500px;
     margin-bottom: 23% !important;
  }
  section:nth-child(5)  {
    height: 500px;
     margin-bottom: 19% !important;
  }
  section:nth-child(6)  {
    height: 500px;
     margin-bottom: 20% !important;
  }
}
/**
 * iPhone 6
 * You can also target devices with aspect ratio.
 
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
{ }

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3)
{ }
*/
.vertical-menu.contact {
    margin-top: 123px;
}

.dirt {
    position: absolute;
    display: none;
}

.dirt.kefir {
    margin-left: 16px;
    margin-top: -50px;
}
.dirt.origen {
    margin-left: 300px;
    margin-top: 589px;
}
.dirt.panela {
    margin-left: -129px;
    margin-top: -50px;
}
.dirt.quesos {
    margin-left: -150px;
    margin-top: -42px;
}
.dirt.contacto {
    margin-left: -35px;
    margin-top: 340px;
}
.wpcf7-form-control {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: rgb(35, 31, 32);
    border-image: none;
    border-style: solid;
    border-width: 0 0 1px;
}
.wpcf7-form-control-wrap {
    float: left;
    width: 100%;
}
.vertical-menu.kefir {
    line-height: 1em;
    margin-left: -25px;
    margin-top: -7px;
    position: absolute;
}
.vertical-menu.kefir a {
    color:#CEC8BA !important;
}
.vertical-menu.kefir li {
    font-size: 13px;
    margin: 27px 0;
}
.wpcf7-form-control.wpcf7-submit:hover {

background: #302104;
color: #CEC8BA;
}
.wpcf7-form-control.wpcf7-submit {
    border: 1px solid rgb(0, 0, 0);
    display: inline-block;
    padding: 6px 9px;
    text-transform: uppercase;
       font-family: 'Appareo-Medium';
}
div.wpcf7-validation-errors, .wpcf7-response-output.wpcf7-mail-sent-ok {
    border: none !important;
    font-family: 'Appareo-Medium';
    float: left;
}
.wpcf7-form > p {
    margin: 0;
}
.wpcf7-form-control.wpcf7-tel {
    width: 141px;
}
.wpcf7-form-control.wpcf7-validates-as-email {
    width: 307px;
}
body{

    background: #DBD5C8;
}
header {
     clear: both;
    float: left;
    width: 100%;
    z-index: 100;
}
.col1, .col2 {float: left; width: 438px;height: 691px;}
.col3, .col4 {float: left; width: 438px;height: 691px;}
.col2 {width: 588px; margin-left: 20px; }
.col4 {width: 588px; margin-left: 20px; }

.logo {
margin-left: 255px;
    margin-top: -76px;
    position: absolute;
    width: 343px;
}
.content-page {

    width: 1200px;
    margin: 0 auto;
      padding-left: 96px;
    width: 1200px;
}

nav .principal {
    height: 59px;
    width: 737px;
      display: inline-block;

}
.principal > ul {
    margin: 105px 0 0;
}
a{text-decoration: none; color: #231F20;}
.principal li {
    float: left;
    list-style: outside none none;
    padding: 5px 43px 40px 1px;
      font-family: 'Appareo-Medium';
          font-weight: normal;
    font-style: normal;
     font-size: 13px;
     text-transform: uppercase;
}

.send {
    clear: both;
    float: left;
    padding: 18px 0;
    text-align: center;
    width: 100%;
 
}
.wpcf7 {
   float: left;
    margin-bottom: 120px !important;
    margin-top: 121px !important;
    max-width: 449px;
}
.input {
    padding-bottom: 12px;
}
.input, .input input{
    float: left;
    width: 100%;
}
label, .input {
    font-size: 15px;
     font-family: 'Appareo-Medium';
}
.tel.input, .email.input {
    width: 40%;
    max-width: 143px;
}

.tel .wpcf7-form-control-wrap {
    width: 100%;
}
.email .wpcf7-form-control-wrap {
    width: 100%;
}
.img1 {
    height: auto;
    width: 435px;
}
.blue-line { background: rgb(0, 166, 231) none repeat scroll 0 0;
    height: 2746px;
    margin-left: 460px;
    margin-top: 170px;
    mix-blend-mode: multiply;
    opacity: 0.9;
    position: absolute;
    width: 47px;}
.img2 {}
.row{width: 100%; height: auto; }
.img-bulgaros {width: 227px;}
.titulo-bulgaros {
    margin-bottom: 28px;
    margin-left: 34px;
    width: 261px;
}
.queso-left{margin-top: 7px;}
.queso-left { float: left;
    margin-left: -7px;
    width: 209px;
}
.topmargin { margin-right: 105px;
    margin-top: 115px !important;}
.contact-info { float: right;
    margin-top: 29px;
    width: 317px;
    margin-right: 36px;
}
.float-right {float: right;}
.float-left {float: left;}
.info-panela {float: left; width: 285px; margin-top: 12px;}
.img4 {  float: left;
    padding-left: 0;
    width: 136px;}
.panela-titulo {float: left;
     margin-left: 0;
    width: 281px;}
.carne {width:607px; height: auto;}
.panelas img, .titulo-ilustres img, .text-fresco img, .ador img, .vaca img, .sand img, .vaca img, .text-bulgaros img, .ador-h img, .titulo-bulgaros img, .img-bulgaros img, .bulgaros img, .img4  img, .conejito img, .panela-titulo img, .logo img, .info-panela img, .img1 img, .queso-left img, .contact-info img, .carne img{width: 100%;}
.conejito {  float: left;
    height: auto;
    width: 244px; }
.panelas {width:437px; height: auto; float: left;}
.vertical-menu {
    float: right;
    width: 130px;
}

.vertical-menu.left {
    float: left;
    width: 130px;
}
.vertical-menu.left > ul {
    padding: 8px 0 0;
}
.contact-info-form > img {
    width: 100%;
}
.content-ador {
    float: left;
    width: 88px;
}
.contact-info-form p {
     float: right;
    line-height: 1.2em;
    margin-right: 56px;
    margin-top: 31px;
    width: 265px;
}
.contact-info-form {
     float: right;
    margin-right: 44px;
    margin-top: 93px;
    width: 388px;

}
.info-panela {text-align: right;}
.text-bulgaros, .contact-info, .info-panela, .contact-info-form, .text-fresco, .contact-info-form p {font-family: 'Appareo-Medium'; font-size: 14px;}
.titulo-ilustres {
    float: right;
    width: 349px;
}
.text-fresco {
    float: left;
    font-family: "Appareo-Medium";
    margin-top: 26px;
    text-align: right;
    width: 304px;
}

.content-bulgaros {
    width: 353px;
}
.vaca {
    float: right;
    width: 188px;
}
.content-fresco {
   float: left;
    margin-left: 34px;
    width: 316px;
}
.vertical-menu > ul {
    font-family: 'Appareo-Medium';
    text-transform: uppercase;

    list-style: outside none none;
}
.emails {
    font-family: "Roboto",sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.2em;
    line-height: 1.8em;
    margin-bottom: 10px;
    margin-left:-4px;
    margin-top: -14px;
    text-transform: uppercase;
}
.emails > a:nth-child(2) {
    margin-left: 34px;
}
.vertical-menu li {
    margin: 30px 0;
    font-size: 14px;
}
.text-bulgaros {
    margin-left: 41px;
    width: 342px;
    margin-top: 38px;

}
.content-panela{width:301px; float: left;}
.ador { 
    height: 446px;
    width: 85px; }
.ador-h {    float: right;
    height: 76px;
    margin-top: 36px;
    width: 329px; }
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}