/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */

@import "../fonts/gotham/style.css";

/* Layout */

body.uk-offcanvas-page {
    margin-left: 0px !important;
}

html,
body {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  word-wrap: break-word;
}

/* Buttons */

.uk-button {
  color: #b5884a;
  line-height: 52px;
  height: 52px;
  border-radius: 50px;
  padding: 0px 30px;
  font-weight: 500;
  border-width: 2px;
}

.uk-icon-button {
  border-width: 2px;
}

.uk-icon-button:after {
  background-color: #b5884a;
}

.uk-icon-button:active,
.uk-icon-button:hover,
.uk-icon-button:focus {
  border-color: #b5884a;
}

/* Header */

header.tm-navbar-container > div {
  width: 1740px;
  max-width: 100%;
  margin: 0px auto;
  padding: 0px 40px;
}

header.tm-navbar-container {
  padding: 20px 0px;
  position: absolute;
  z-index: 99;
  width: 100%;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -ms-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

/* logo */

@media screen and (min-width: 768px) {
  body header .navbar-left {
    padding-right: 20px;
  }
}

body header:not(.uk-active) img.logo-color {
  display: none;
}

body header.uk-active img.logo {
  display: none;
}

/* Menu */

.uk-navbar-nav > li:not(:last-child),
.uk-navbar-brand {
  margin-right: 10px;
}

.tm-navbar > ul.uk-navbar-nav.uk-visible-large > li > a::before {
  display: none;
}

body
  header:not(.uk-active)
  .tm-navbar
  > ul.uk-navbar-nav.uk-visible-large
  > li
  > a {
  color: #ffffff;
}

.tm-navbar > ul.uk-navbar-nav.uk-visible-large > li > a {
  font-size: 14px;
  line-height: 40px;
  height: 40px;
  padding: 0px 30px;
  border-radius: 50px;
  font-weight: 500;
}

.tm-navbar > ul.uk-navbar-nav.uk-visible-large > li.uk-active > a,
.tm-navbar > ul.uk-navbar-nav.uk-visible-large > li > a:hover,
.tm-navbar > ul.uk-navbar-nav.uk-visible-large > li > a:focus {
  color: #ffffff;
  background-color: #b5884a;
}

.uk-dropdown.uk-dropdown-navbar.uk-dropdown-width-1.uk-dropdown-bottom {
  width: 300px;
  border-radius: 20px;
}

@media screen and (max-width: 1600px) {
  .uk-navbar-nav > li:not(:last-child),
  .uk-navbar-brand {
    margin-right: 5px;
  }

  .tm-navbar > ul.uk-navbar-nav.uk-visible-large > li > a {
    font-size: 14px;
    padding: 0px 16px;
  }
}

@media screen and (max-width: 1380px) {
  .tm-navbar > ul.uk-navbar-nav.uk-visible-large > li > a {
    font-size: 12px;
    padding: 0px 15px;
  }
}

/* Offcanvas */
body #offcanvas{
  z-index: 999;
}

body #offcanvas .uk-offcanvas-bar {
    background-color: #6d522c !important;
    z-index: 998;
}

header a.uk-navbar-toggle.uk-hidden-large {
  background-color: #ffffff;
  color: #6d522c;
  border-radius: 50%;
  padding: 0;
  width: 50px;
  height: 50px;
  text-align: center;
}

header a.uk-navbar-toggle.uk-hidden-large:hover,
header a.uk-navbar-toggle.uk-hidden-large:focus {
  background-color: #6d522c;
  color: #ffffff;
}

/* Contactos Header */
.contacto-header > a {
  background-color: #ffffff;
  color: #b5884a;
  border-color: #ffffff;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

body header.uk-active .contacto-header > a {
  border-color: #b5884a;
}

.contacto-header > a.uk-button {
  border-radius: 50px;
  width: inherit;
  padding: 0px 15px;
}

.contacto-header > a.uk-button > span {
  margin-top: -3px;
  display: block;
}

.contacto-header > a.uk-button > span > i {
  font-size: 20px;
  vertical-align: middle;
}

.contacto-header > a:not(:last-child) {
  margin-right: 10px;
}

/* Home */

body.home .uk-block.tm-block-main.uk-block-default {
  display: none;
}

/* Home Slideshow */

.slideshow-home .uk-overlay-panel {
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
}

.slideshow-home .uk-overlay-panel h3 {
  color: #ffffff;
  font-size: 40px;
  line-height: 50px;
  margin: 0px;
  font-weight: 300;
}

.slideshow-home .uk-overlay-panel h1 {
  color: #ffffff;
  font-size: 110px;
  line-height: 100px;
  text-transform: uppercase;
  margin: 0px;
  font-weight: 900;
}

@media screen and (max-width: 960px) {
  .slideshow-home .uk-overlay-panel h3 {
    font-size: 30px;
    line-height: 40px;
  }

  .slideshow-home .uk-overlay-panel h1 {
    font-size: 83px;
    line-height: 86px;
  }
}

@media screen and (max-width: 640px) {
  .slideshow-home .uk-overlay-panel h3 {
    font-size: 20px;
    line-height: 30px;
  }

  .slideshow-home .uk-overlay-panel h1 {
    font-size: 56px;
    line-height: 60px;
  }
}

.slideshow-home .uk-overlay-panel.uk-overlay-bottom {
  background-color: transparent;
}

/* Sections */

section > div > .uk-panel > h3.uk-panel-title {
  text-align: center;
  font-size: 40px;
  line-height: 48px;
  margin-bottom: 50px;
}

section > div > .uk-panel > h3.uk-panel-title::after {
  content: "";
  display: block;
  margin: 10px auto 0px auto;
  width: 92px;
  max-width: 100%;
  height: 4px;
  background-color: #cea273;
}

/* Categorias Home */

.categorias-home
  > div
  > .uk-panel
  > .uk-text-center.uk-margin.uk-margin-top-remove {
  height: 100%;
}

.categorias-home > div > .uk-panel {
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
}

.categorias-home > div > .uk-panel > .uk-panel-title {
  padding: 0px 20px 20px 20px;
  width: 55%;
  justify-items: baseline;
  height: 100;
}

.categorias-home > div > .uk-panel:hover > .uk-panel-title {
  color: #b5884a;
}

/* Secciones Home */

.secciones-home::before {
  content: url("../../../images/layout/tronco.png");
  display: block;
  position: absolute;
  top: 35%;
  right: 2%;
}

.secciones-home .uk-panel {
  font-size: 16px;
  line-height: 28px;
  width: 629px;
  max-width: 100%;
  margin: 0px auto;
  padding-top: 60px;
}

@media screen and (min-width: 960px) {
  .secciones-home .uk-panel {
    padding-left: 100px;
    margin: 0px auto 0px 0px;
  }
}

.secciones-home h3.uk-panel-title {
  font-size: 40px;
  line-height: 48px;
  margin-bottom: 30px;
}

.secciones-home h3.uk-panel-title::after {
  content: "";
  display: block;
  margin: 10px 0px;
  width: 92px;
  max-width: 100%;
  height: 4px;
  background-color: #cea273;
}

.secciones-home .uk-panel .uk-button {
  width: 295px;
  max-width: 100%;
  margin-top: 20px;
}

.secciones-home img {
  width: 100%;
  object-fit: cover;
}

/* Secciones full */

.yoo-zoo.blog-uikit.blog-uikit-mi-diseno .uk-article-title {
  display: none;
}

.yoo-zoo.blog-uikit.blog-uikit-tableros-mdf .uk-width-medium-3-5,
.yoo-zoo.blog-uikit.blog-uikit-tableros-alto-brillo .uk-width-medium-3-5,
.yoo-zoo.blog-uikit.blog-uikit-rocko-tiles .uk-width-medium-3-5 {
  display: block;
}

.yoo-zoo.blog-uikit
  > article.uk-article
  > .uk-grid
  > div
  > h1.uk-article-title {
  font-size: 30px;
  line-height: 38px;
}

h1.uk-article-title {
  margin-top: 0px;
}

article h1.uk-article-title::after {
  content: "";
  display: block;
  margin: 10px 0px;
  width: 92px;
  max-width: 100%;
  height: 4px;
  background-color: #cea273;
}

article > .uk-align-medium-left + h1.uk-article-title::after {
  margin: 10px auto !important;
}

@media (min-width: 768px) {
  article .uk-align-medium-left {
    padding-right: 15px;
  }

  article
    > .uk-align-medium-left
    + h1.uk-article-title
    + h3
    + p
    + p
    + br
    + .uk-grid {
    transform: translateX(-40px);
  }
}

/* Noticias Home */

div#tm-top-d::before {
  content: url("../../../images/layout/tronco.png");
  display: block;
  position: absolute;
  top: -12%;
  left: -12%;
}

.articulos-home .uk-grid h3.uk-panel-title,
.yoo-zoo.blog-uikit.blog-uikit-blog
  > .uk-grid
  > div
  > article.uk-article
  > .element-imagepro
  + h1.uk-article-title {
  color: #cea273;
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
  margin-bottom: 0px;
}

.yoo-zoo.blog-uikit.blog-uikit-blog
  > .uk-grid
  > div
  > article.uk-article
  > .element-imagepro
  + h1.uk-article-title::after {
  display: none;
}

.articulos-home .uk-grid h3.uk-panel-title + .uk-margin > a,
.yoo-zoo.blog-uikit.blog-uikit-blog
  > .uk-grid
  > div
  > article.uk-article
  > .element-imagepro
  + h1.uk-article-title
  + .uk-article-lead,
.yoo-zoo.blog-uikit.blog-uikit-blog
  > .uk-grid
  > div
  > article.uk-article
  > .element-imagepro
  + h1.uk-article-title
  + .uk-article-lead
  > a {
  color: #333333 !important;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-decoration: none;
  text-transform: initial;
}

/* Breadcrumb */
.inner-breadcrumb .uk-breadcrumb {
  background-image: url(../../../images/layout/bg-header.jpg);
  background-size: cover;
  text-align: center;
  list-style: none;
  padding: 180px 40px 40px;
}

.inner-breadcrumb .uk-breadcrumb li + li.uk-active {
  display: none;
}

.inner-breadcrumb .uk-breadcrumb li.uk-active::before {
  display: none;
}

.inner-breadcrumb ul.uk-breadcrumb li > * {
  font-size: 30px;
  color: #ffffff;
  font-weight: 700;
  line-height: 34px;
}

/* Productos */

.yoo-zoo.blog-uikit.blog-uikit-productos
  > .uk-grid
  > div
  > article.uk-article
  > h1.uk-article-title::after {
  display: none;
}

.yoo-zoo.blog-uikit.blog-uikit-productos
  > .uk-grid
  > div
  > article.uk-article
  > h1.uk-article-title
  > a {
  color: #333333 !important;
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
}

/*Catalogue*/
.es-catalogue .uk-width-medium-1-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.es-herraje .uk-grid-margin,
.es-herraje .uk-grid-margin h3,
.es-herraje .uk-row-first h3,
.es-herraje .uk-row-first ul,
.es-herraje .uk-grid-margin ul {
  margin: 5px;
}
/* Footer */

body #tm-footer {
  background-color: #172e26;
  color: #ffffff;
}

body #tm-footer p,
body #tm-footer span,
body #tm-footer a:not(.uk-icon-button):not(.uk-button),
body #tm-footer h1,
body #tm-footer h2,
body #tm-footer h3,
body #tm-footer h4,
body #tm-footer h5,
body #tm-footer h6 {
  color: #ffffff;
}

body #tm-footer h4,
body #tm-footer .uk-panel-title {
  font-weight: 500;
}

@media (min-width: 768px) {
  body #tm-footer .uk-grid-divider > *:nth-child(n + 2) {
    border-left: 2px solid rgba(255, 255, 255, 0.2);
  }
}

@media (max-width: 768px) {
  body #tm-footer .uk-grid-divider > *:nth-child(n + 2) {
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    padding-top: 30px;
  }
}

._menu_footer ul.uk-subnav.uk-subnav-line {
  display: block;
}

._menu_footer ul.uk-subnav.uk-subnav-line > li {
  display: block;
  float: inherit;
}

._menu_footer ul.uk-subnav.uk-subnav-line > li > * {
  font-weight: 500;
}

._menu_footer ul.uk-subnav.uk-subnav-line > li:hover > * {
  color: #cea273 !important;
}

._menu_footer ul.uk-subnav.uk-subnav-line > :nth-child(n + 2):before {
  display: none;
}

/* ToTop Button */

a.tm-totop-scroller {
  background-color: #ffffff;
  color: #b5884a;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  right: 40px;
  bottom: 40px;
  top: inherit;
}

a.tm-totop-scroller::before {
  color: #b5884a;
  font-size: 10px;
  font-weight: 700;
}

a.tm-totop-scroller:hover {
  background-color: #b5884a;
  color: #ffffff;
}

a.tm-totop-scroller:hover::before {
  color: #ffffff;
}

/*SVG mensajes enviados - no enviados*/

.circle {
  fill: none;
  stroke: #b5884a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}
.circle-dash {
  fill: none;
  stroke: #b5884a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}
.check {
  fill: none;
  stroke: #777673;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.check-dash {
  fill: none;
  stroke: #b5884a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.check {
  stroke-dasharray: 60 100;
  animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;
  -webkit-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;
  -moz-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;
  -o-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;
  opacity: 0;
}
@-webkit-keyframes check {
  from {
    stroke-dashoffset: 60;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 00;
    opacity: 1;
  }
}
@-moz-keyframes check {
  from {
    stroke-dashoffset: 60;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 00;
    opacity: 1;
  }
}
@keyframes check {
  from {
    stroke-dashoffset: 60;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 00;
    opacity: 1;
  }
}
.check-dash {
  stroke-dasharray: 10 100;
  animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;
  -webkit-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;
  -moz-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;
  -o-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;
}
@-webkit-keyframes check-dash {
  from {
    stroke-dashoffset: 120;
  }
  to {
    stroke-dashoffset: 45;
  }
}
@-moz-keyframes check-dash {
  from {
    stroke-dashoffset: 120;
  }
  to {
    stroke-dashoffset: 45;
  }
}
@keyframes check-dash {
  from {
    stroke-dashoffset: 120;
  }
  to {
    stroke-dashoffset: 45;
  }
}
.circle {
  stroke-dasharray: 300 300;
  animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;
  -webkit-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;
  -moz-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;
  -o-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;
  opacity: 0;
}
@-webkit-keyframes circle {
  from {
    stroke-dashoffset: 300;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@-moz-keyframes circle {
  from {
    stroke-dashoffset: 300;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@keyframes circle {
  from {
    stroke-dashoffset: 300;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
.circle-dash {
  stroke-dasharray: 10 300;
  animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
  -webkit-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
  -moz-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
  -o-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
  opacity: 0;
}
@-webkit-keyframes circledash {
  from {
    stroke-dashoffset: 320;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 20;
    opacity: 1;
  }
}
@-moz-keyframes circledash {
  from {
    stroke-dashoffset: 320;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 20;
    opacity: 1;
  }
}
@keyframes circledash {
  from {
    stroke-dashoffset: 320;
    opacity: 1;
  }
  to {
    stroke-dashoffset: 20;
    opacity: 1;
  }
}


.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  font-size: 30px;
  line-height: 50px;
  background-color: #fff;
  color: #b5884a;
  border-color: #b5884a;
  padding: 0;
  width: 50px;
  height: 50px;
}

.tm-image-full {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tm-image-full .uk-text-center {
    padding-left:50px;
    padding-right:50px;
}