/*!
Theme Name: BúhoDigital
Theme URI: http://buhodigital.net/
Author: buhodigital.net
Author URI: http://buhodigital.net/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: buhodigital
Tags: custom-design, web-developer, los-mochis

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

BuhoDigital is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
*{margin: 0;padding: 0;position: relative;transition: transform .3s, opacity .3s;-webkit-transition: -webkit-transform .3s, opacity .3s;-moz-transition: -moz-transform .3s, opacity .3s}
:root{
  --main-bg-color:#f1eee9;
  --main-tx-color:#3e3937;
  --section-dark:#49565c;
  --dark:#30292F;
  --border:grey;
  --focus:rgb(166,134,117,0.25);
  --blue-80:#002275;
}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}


body{font-family: 'Cormorant', serif; font-size: 1.5em; background-color: var(--main-bg-color); color:var(--main-tx-color);}
a{color:var(--main-tx-color);}
.c{clear:both;display:block;height:0;width:0;font-size: 0;opacity:0}
.br{clear:both;display:block;height:1em;width:0;opacity:0}
.p{padding:1em;}
.m{margin: 1em;}
.w{max-width:1200px;margin:0 auto}
.nt{padding-top: 0;padding-bottom: 0;margin-top: 0;margin-bottom: 0}
.max{padding-top: 3em;padding-bottom:3em}
.sh{box-shadow:rgba(0,0,0,.1) 0 1px 0, rgba(0,0,0,.1) 0 1px 3px, rgba(0,0,0,.1) 0 1px 5px}
.inline{display: inline-block;}
.le{float: left}
.ri{float: right}
.txt-l{font-style: 1.25em}
.txt-s{font-style: .8em}
.txt-center{text-align: center;}
.txt-ri{text-align: right;}
.d1,.d2,.d3,.d4,.d5,.d6,.d7,.d8,.d9,.d10,.d11,.d12{float:left}
.d1{width:8.33%}.d2{width:16.66%}.d3{width:25%}.d4{width:33.33%}.d5{width:41.66%}.d6{width:50%}.d7{width:58.33%}.d8{width:66.66%}.d9{width:75%}.d10{width:83.33%}.d11{width:91.66%}.d12{width: 100%}
.pointer{cursor: pointer;}
.fit{overflow: hidden;}
.hide{display: none; opacity:0; animation: opacity 2s;}
.show{display: block; opacity:1;}
/*show animation*/
@keyframes opacity {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.air{padding-top: 20vh; padding-bottom:20vh; padding-left:10vw; padding-right:10vW;}
.air-bottom{
  padding-bottom:10vh;
}
.air-top{
  padding-top:10vh;
}
.air-2{padding-top: 25vh; padding-bottom:25vh; padding-left:10vw; padding-right:10vW; margin-top:-5vh;}
.air-0{
  padding-top: 15vh; padding-bottom:15vh; padding-left:10vw; padding-right:10vW;
}
.justify{text-align: justify;}
.uppercase{text-transform: uppercase;}
.max{max-width: 1200px; margin-left:auto; margin-right: auto;}
b{font-weight: 900;}

#toogle-open{
  z-index: 10000;
}

#index-video, .index-image {
    height: 102vh;
    margin-top: -2vh;
    width: 100%;
    object-fit: cover;
    z-index: -100;
    right: 0;
    bottom: 0;
}

.index-image{
	background: no-repeat center center;
    background-size: cover;
    overflow: hidden;
    background-position: center; 
}

#index-video .index-image video{
  height: 100%;
  width: 177.77777778vh; 
  min-width: 100%;
  min-height: 56.25vw; 
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#text-header{
  position: absolute;
  top: 40vh;
  left:calc(50% - 200px);
  color:#fff;
  overflow:hidden;
}

#text-header h1, #text-header span{
  white-space: nowrap;
  overflow: hidden;
  width: 600px;
  animation: type 2s steps(60, end); 
  text-shadow: 0 0 0px white;
  color: transparent;
  margin-bottom:0px;
}

/*Ajuste de centrado span*/
#text-header span {
  margin-top: -10px;
  margin-left: 55px;
}

/*Animación de texto de header*/
@keyframes type{ 
  from { width: 0; } 
  from { text-shadow: 0 0 5px; }
} 


#site-navigation, #logo{
  position:fixed;
  top:0;
  left: 0px;
  width: 100%;
  z-index: 100;  
  transition-duration: 3s;
  transition-property: background-color;
}

#logo img{
  margin-left: 10px;
  height: 40px;
}
#logo a p{
  font-size:0.75em;
  display: inline;
  position:relative;
  top: -15px;
}

#site-navigation a{
  height: 100px;
  z-index: 999;
}

#site-navigation a:hover, [aria-current]:not([aria-current="false"]) {
    border-bottom:2px solid var(--border);
    padding-bottom:2px;
    transition-duration: 0.25s;
    transition-property: all;
}

#logo{
  padding:0.5em;
  }

.menu-item{
  float:right;
  padding:0.5em !important;
}

.menu-item{
   opacity: 1;
   margin-top:0px;
   width: auto;
   display: inline-block;
   text-align: center;
   padding:1em;
   font-size: 20px;
   animation: type-menu 0.5s steps(60, end); 
}
.menu-item ul{
  list-style:none;
}
/*Animación de menu*/
@keyframes type-menu{ 
  from { opacity: 0; margin-top:-20px;} 
} 

.menu-bg{
  background-color: var(--dark)!important;
}

#toggle{
  color:#fff;
  position: fixed;
  top:0px;
  right: 0px;
  padding:0.5em;
  display:none;
}

#site-navigation a{
  text-decoration: none;
  color:#fff;
}

.sub-menu{
position:fixed;
top:80px;
right:0px;
display: none;
}

.sub-menu .menu-item {
  margin:0px;
  padding:0px;
}

#site-navigation .sub-menu  a{
  color:var(--main-tx-color);
  text-shadow: 1px 1px rgba(255,255,255);
  margin:0.5em 1em;
}

.current_page_item .sub-menu {
  display: block;
}

/*appear effect*/
.fade{
  opacity: 0;
  margin-left:-100px;
  transition-property: margin;
  transition-duration: 1s;
}

.square{
  border:2px solid var(--border);
  width: 100%;
  height: 300px;
  position: absolute;
  top:100px;
  z-index: 10;
  /*background-color: grey;*/
}

.bg-square{
  background-color: #fff;
  margin: 8px;
  padding:1em 2em;
  height: 280px;
}

#productos a{
 color:#fff;
}

#productos li{
  list-style: none;
  padding:0.5em 0;
}

#productos small{
  font-size: 0.75em;
   text-decoration: underline;
   color:rgba(255,255,255,0.5);
}

.bg-dark{
  background-color: var(--dark);
  background-repeat:no-repeat;
  background-size:cover;
  color:#fff;
}

.bg-pattern{
  background-size: auto;
  background-repeat: repeat;
}


#info-productos .square{
  top:0px;
}

.h-border{
  border-top: solid #fff 1px;
  border-bottom: solid #fff 1px;
}

.social-icon{height: 25px}
.site-info a {text-decoration: none;}


.who a{
  position:absolute;
}

.who img {
  width: 50%;
  filter: grayscale(100%);
  border:#fff 3px solid;
  -webkit-box-shadow: 3px 3px 4px -1px rgba(0,0,0,0.25);
  -moz-box-shadow: 3px 3px 4px -1px rgba(0,0,0,0.25);
  box-shadow: 3px 3px 4px -1px rgba(0,0,0,0.25);
}

a #img1, a #img2, a #img3{
  transition-property: z-index;
  transition: 1s;
}

a #img1{
  top:-10vh;
  z-index: 3;

}

a #img2{
  top:5vh;
  left:10vw;
  z-index: 2;
}

a #img3{
  top:0;
  left: 25vw;
  z-index: 1;
}

a:hover{
   z-index: 10;
}

a:hover img{
  filter: grayscale(0%);
}

.focus{
  background-color: var(--focus);
}


.site-footer a{
  text-decoration: none;
  color:var(--main-tx-color);
}

/***********************************
Ajuste woocommerce
************************************/
.woocommerce button.button {
  font-size: 0.65em;
  font-family: 'Cormorant', serif;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment, .woocommerce-info {
    background: var(--main-bg-color);
  }

/************************************
Ajuste formularios
************************************/
.ur-frontend-form .ur-form-row .ur-form-grid .__PrivateStripeElement, .ur-frontend-form .ur-form-row .ur-form-grid input[type="date"], .ur-frontend-form .ur-form-row .ur-form-grid input[type="email"], .ur-frontend-form .ur-form-row .ur-form-grid input[type="number"], .ur-frontend-form .ur-form-row .ur-form-grid input[type="password"], .ur-frontend-form .ur-form-row .ur-form-grid input[type="phone"], .ur-frontend-form .ur-form-row .ur-form-grid input[type="text"], .ur-frontend-form .ur-form-row .ur-form-grid input[type="timepicker"], .ur-frontend-form .ur-form-row .ur-form-grid input[type="url"], .ur-frontend-form .ur-form-row .ur-form-grid select, .ur-frontend-form .ur-form-row .ur-form-grid textarea{
  border: solid 1px rgba(0,0,0,0.25);
}

.ur-frontend-form .ur-form-row .ur-form-grid label, .ur-frontend-form .ur-form-row .ur-form-grid legend{
  font-size:1em;
}

.ur-form-container .button, .ur-form-container button, .user-registration .button, .user-registration button{
  background-color: #000;
  color:#fff;
}

.user-registration-error,#user-registration.horizontal .user-registration-error, #user-registration.horizontal .user-registration-info, #user-registration.horizontal .user-registration-message{
  font-size: 1em !important;
  text-align: center;
}

.ur-frontend-form button, .ur-frontend-form button[type="submit"], .ur-frontend-form input[type="submit"]{
  font-family: 'Cormorant', serif; font-size: 1em;
  z-index: 100;
}

#user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a, #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a{
    font-family: 'Cormorant', serif; font-size: 1em;
    display: none;
}

#user-registration.horizontal .user-registration-MyAccount-navigation ul{
  border-bottom: 0px;
}

#user-registration *{
  padding:0.1em 0.25em;
}

.user-registration-img-container,#user-registration .user-registration-MyAccount-content .user-registration-profile-header, .posted_in{
  display:none;
}

#user-registration.horizontal .user-registration-MyAccount-content a{
  padding:1em;
}

.onsale, .related, #comments, .nav-links, .actions, .coupon{display: none;}

.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right, .pswp__caption, .pswp__top-bar{
  margin-top:50px;
}

.woocommerce div.product div.images .flex-control-thumbs{
  z-index: 100;
}

.woocommerce div.product div.images.woocommerce-product-gallery, .entry-footer{  
  width: 50%;
  padding:1em;
  position:relative;
  display: block;
  clear:both;
}

.woocommerce-MyAccount-navigation{
  display: none;
}

.woocommerce-account .woocommerce-MyAccount-content{
  float:left;
  width: 100%;
}

.entry-footer, .posted-on, .byline, .orderby, .woocommerce-result-count{
  display: none;
}

.wp-block-file a.wp-block-file__button{
  font-size: 0.75em;
}


.woocommerce button.button.alt, .woocommerce a.button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  background-color: #000;
  color:#fff;
}

.woocommerce button.button.alt:hover, .woocommerce a.button:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  background-color: grey;
  color:#fff;
}

.woocommerce a.button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
    font-size: 0.75em;
}

.woocommerce div.product p.price, .woocommerce ul.products li.product .price{
  color:#000;
  font-size: 1.25em;
  font-weight: 900;
  margin-bottom:1em;
}

.woocommerce-cart table.cart img{
  width: 100px;
}

.woocommerce-info{
  border-top-color:#000;
}

.woocommerce-info::before{
  color:#000;
}


/*Social Label*/
#social-label{
  position:fixed;
  top: 35%;
  right: -1.75em;
  /* bring your own prefixes */
  transform: translate(-40%, 0%);
  font-size: 1.5em;
  background-color:rgba(255,255,255,0.8);
  padding: 0.25em 1em 0.25em 0.25em;
  border-radius: 10px 0 0 10px;
  z-index: 10;

  /*shadow*/
  -webkit-box-shadow: 3px 8px 16px 0px rgba(0,0,0,0.26);
  -moz-box-shadow: 3px 8px 16px 0px rgba(0,0,0,0.26);
  box-shadow: 3px 8px 16px 0px rgba(0,0,0,0.26);
}

#social-label:hover{
  background-color:rgba(255,255,255,1);
}

#social-label a{
  clear:both;
  display:block;
  padding:0.25em 0;
}

#social-label a .fa-facebook{
  color:rgb(73,136,255);
}
#social-label a .fa-youtube{
  color:rgb(235,40,3);
  font-size: 0.85em;
}
#social-label a .fa-linkedin{
  color:rgb(56,116,179);
}
#social-label a .fa-whatsapp{
  color:rgb(68,174,0);
  font-size: 1.10em;
}

/*edicion de formato de entradas*/
.entry-content h1, .entry-content h2, .entry-contenth3 h3{
  padding:1.5em 0 0.5em 0;
}
 .entry-content p{
  padding:0.5em 0 1em 0;
}


/***********************************
(+) Ajustes de pantalla
***********************************/
@media(max-width:1024px){
  body{font-size: 1.5em;}
  h1, h2, h3{font-size: 1.2em;}
  #text-header h1, #text-header span{
    width: 300px
  }
  #text-header{
    left:15vw;
  }
  #text-header h1, #text-header span{
    width: 300px
  }
  #text-header{
    left:calc(50% - 130px);
  }

  /*Ajuste de centrado span*/
  #text-header span {
    font-size: 0.75em;
    margin-left: 8px;
  }

  #site-navigation{
    height: 55px;
  }

  #logo img{
    height: 35px;
  }
  .site-main{
    margin-top: 55px !important;
    white-space: pre-line; 
  }

  #site-navigation ul{
    margin-top: 55px;
    width: 220px;
    float:right;
    display:none;
    opacity: 0;
    -webkit-animation: display-none-transition 2s both;
    animation: display-none-transition 2s both;
  }

  #site-navigation li{
    background-color: var(--dark);
  }
  
  .menu-item{
   margin-top: 0px;
   width: 100%;
   display: block;
   text-align: right;
   padding:1em;
   font-size: 20px;
   float:right;
  }

  #toggle{
    display: block;
    z-index: 1000;
    cursor:pointer;
  }

  #toggle #toggle-close{
    display:none;
  }

  #toggle #toggle-open{
    display:block;
  }

  .d1,.d2,.d3,.d4,.d5,.d6,.d7,.d8,.d9,.d10,.d11{
    width: 100%;
  }

  .square{
    position:relative;
    margin-bottom:20vh;
  }
  .who{
  padding-bottom:20vh;
  }
  .who .images{
    padding-top: 10vh;
  }
  .bg-square{
    font-size: .85em;
  }
  .site-footer a{
    font-size:0.75em;
  }

  .woocommerce div.product div.images.woocommerce-product-gallery{
    width: 100%;
  }

  .sub-menu{visibility: hidden;}

  #logo a p {
    top: -12px;
    font-size: 0.60em;
  }
}

@media (max-width: 1300px){
  #index-video, .index-image {
    height: 100vh;
    margin-top: 0vh;
  }
}
/***********************************
(-) Ajustes de pantalla
***********************************/


@-webkit-keyframes display-none-transition {
  100% {
    opacity: 1;
  }
}
@keyframes display-none-transition {
  100% {
    opacity: 1;
  }
}