/* ------------------------------------------------------------
    STYLES

    1 ::::: BASE
    Variables
    Mixins
    Reset
    Base

    2 ::::: LIB
    Forms
    Buttons
    Icons
    Tables

    3 ::::: PLUGINS
    Slick 1.8.1

    4 ::::: RESPONSIVE
    Largedevices
    Mediumdevices
    Smalldevices

------------------------------------------------------------ */
/* ------------------------------------------------------------
    FONTS
------------------------------------------------------------ */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmT.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmT.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v47/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammT.ttf) format('truetype');
}
/* ------------------------------------------------------------
    BASE COLORS
------------------------------------------------------------ */
/* ------------------------------------------------------------
   FONTS
------------------------------------------------------------ */
/* ------------------------------------------------------------
    ANIMATIONS
------------------------------------------------------------ */
a,
input,
button {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;
  /*10px = 1rem*/
  overflow-x: hidden;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  overflow-x: hidden;
  min-width: 360px;
}
h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #1B1C1E;
  font-size: 48px;
}
h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #1B1C1E;
  font-size: 32px;
}
h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #1B1C1E;
  font-size: 24px;
}
h4 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #1B1C1E;
  font-size: 20px;
}
h5 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #1B1C1E;
  font-size: 18px;
}
h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #1B1C1E;
  font-size: 16px;
}
p,
ul,
ol,
li {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #1B1C1E;
  font-size: 16px;
}
a,
.btn {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #1B1C1E;
  font-size: 16px;
}
.color-redgloss {
  color: #dd0705;
}
.color-champagne {
  color: #958669;
}
.btn-champagne {
  background-color: #958669;
}
.btn-champagne:hover {
  background-color: #958669;
}
.btn-redgloss {
  background-color: #dd0705;
}
.btn-redgloss:hover {
  background-color: #dd0705;
}
.bg-hueso {
  background-color: #edeced;
}
.bg-redgloss {
  background-color: #dd0705;
}
.bg-champagne {
  background-color: rgba(149, 134, 105, 0.4);
}
header {
  width: 100%;
  padding: 8px 0px;
  top: 0;
  position: fixed;
  z-index: 9999;
  transition: all ease 0.5s;
}
header.scroll {
  background-color: #edeced;
  border-bottom: 2px solid #958669;
}
header.scroll .logo {
  height: 80px;
}
header.scroll nav ul li a {
  color: #1B1C1E;
  text-decoration: none;
  font-size: 16px;
}
header .logo {
  height: 250px;
}
header nav {
  width: 100%;
}
header nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
}
header nav ul li a {
  color: #edeced;
  text-decoration: none;
}
header nav .logo-mobile {
  display: none;
}
header nav .close {
  display: none;
}
header .menu-opener {
  display: none;
}
.heroimage {
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-color: #000;
}
.heroimage .overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(27, 28, 30, 0.4);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.heroimage .overlay h1,
.heroimage .overlay p {
  color: #edeced;
}
.heroimage .overlay p {
  font-size: 18px;
}
.heroimage.small {
  height: 40vh;
  min-height: 344px;
}
.heroimage.small .overlay {
  justify-content: end;
  padding-bottom: 24px;
}
.heroimage.medium {
  height: 60vh;
}
.heroimage.large {
  height: 80vh;
}
.heroimage.full {
  height: 100vh;
}
footer {
  background-color: #1B1C1E;
  padding: 24px 0px;
}
footer .logo {
  height: 200px;
}
footer .footermenu {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
footer .footermenu li {
  padding: 0px 0px 0px 16px;
}
footer .footermenu li a {
  color: #edeced;
  text-decoration: none;
}
footer a.text-link {
  color: #958669;
  text-decoration: none;
  font-size: 12px;
}
footer a.text-link-lg {
  color: #958669;
  text-decoration: none;
}
.cta {
  background-color: #1B1C1E;
  padding: 64px 0px;
  color: #FDFCF9;
}
.cta h3,
.cta p {
  color: #FDFCF9;
}
.cta p {
  font-size: 18px;
}
.cta a {
  color: #FDFCF9;
  padding: 16px 24px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cta a:hover {
  color: #FDFCF9;
  opacity: 0.8;
}
.content-bg-section {
  padding: 64px 0px;
}
.services-section {
  padding: 64px 0px;
}
.services-section .card-services {
  height: 250px;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: end;
  padding: 16px;
  text-decoration: none;
}
.services-section .card-services .content {
  width: 100%;
  border-radius: 4px;
  padding: 24px 16px;
  opacity: 1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.services-section .card-services .content a {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #1B1C1E;
  font-size: 24px;
  color: #edeced;
  text-decoration: none;
  cursor: pointer;
}
.services-section .card-services a.content {
  text-decoration: none;
}
.services-section .card-services a.content h3,
.services-section .card-services a.content h5 {
  color: #edeced;
}
.services-section .card-services:hover .content {
  opacity: 1;
}
.services-section-list {
  padding: 64px 0;
}
.services-section-list .card-list {
  display: flex;
}
.services-section-list .card-list img {
  width: 250px;
  margin-right: 24px;
}
.card-dropdown.open .card-btn-show {
  background-color: #958669;
}
.card-dropdown.open .card-btn-show p {
  color: #edeced;
}
.card-dropdown.open .card-btn-show::after {
  transform: rotate(180deg);
  color: #edeced;
}
.card-dropdown.open .content {
  height: auto;
  overflow: auto;
  padding: 16px 8px;
}
.card-dropdown .card-btn-show {
  cursor: pointer;
  border-bottom: 1px solid #1B1C1E;
  padding: 0px 8px;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.card-dropdown .card-btn-show:hover {
  background-color: #958669;
}
.card-dropdown .card-btn-show:hover p {
  color: #edeced;
}
.card-dropdown .card-btn-show:hover::after {
  color: #edeced;
}
.card-dropdown .card-btn-show::after {
  content: '\e5c5';
  font-family: 'Material Symbols Outlined';
  font-size: 22px;
  position: absolute;
  right: 0;
  top: 0;
}
.card-dropdown .card-btn-show p {
  font-size: 22px;
  padding-bottom: 0;
  margin-bottom: 0;
}
.card-dropdown .content {
  height: 0px;
  overflow: auto;
}
.col-collage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.col-collage a {
  width: 200px;
  height: 200px;
  margin-bottom: 16px;
  margin-left: 8px;
}
.col-collage a img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.btns-wrap-projects {
  flex-wrap: wrap;
}
.btns-wrap-projects .btn-select-project {
  margin: 8px 0;
}
.btn {
  color: #FDFCF9;
  padding: 16px 24px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn:hover {
  color: #FDFCF9;
  opacity: 0.8;
}
.contact-form label {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #1B1C1E;
  font-size: 16px;
}
.contact-form input {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #1B1C1E;
  font-size: 16px;
}
.contact-form textarea {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #1B1C1E;
  font-size: 16px;
  height: 150px;
}
.contact-form .btn {
  padding: 8px 24px;
}
@media (max-width: 767px) {
  .services-section {
    padding: 64px 0px;
  }
  .services-section .card-services .content {
    opacity: 1;
  }
  .services-section .card-services .content a {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #1B1C1E;
    font-size: 24px;
    color: #edeced;
    text-decoration: none;
    cursor: pointer;
  }
  .services-section .card-services a.content {
    text-decoration: none;
  }
  .services-section .card-services a.content h3,
  .services-section .card-services a.content h5 {
    color: #edeced;
  }
  .services-section .card-services:hover .content {
    opacity: 1;
  }
  header {
    width: 100%;
    padding: 8px 0px;
    top: 0;
    position: fixed;
    z-index: 9999;
    transition: all ease 0.5s;
  }
  header.scroll nav ul li a {
    color: #958669;
    text-decoration: none;
    font-size: 22px;
  }
  header.scroll .menu-opener {
    display: block;
    color: #958669;
    margin-right: 24px;
  }
  header nav {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1B1C1E;
    display: flex;
    align-items: center;
    display: none;
  }
  header nav .close {
    position: absolute;
    right: 24px;
    top: 24px;
    background-color: transparent;
    display: block;
  }
  header nav .close span {
    color: #958669;
    font-size: 32px;
  }
  header nav .logo-mobile {
    position: absolute;
    width: 150px;
    top: 24px;
    left: 24px;
    display: block;
  }
  header nav ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    list-style: none;
    padding: 0px 48px;
    width: 100%;
  }
  header nav ul li {
    margin-bottom: 24px;
  }
  header nav ul li a {
    color: #958669;
    font-size: 22px;
    text-decoration: none;
  }
  header .menu-opener {
    display: block;
    color: #FDFCF9;
    margin-right: 24px;
  }
  h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    color: #1B1C1E;
    font-size: 34px;
  }
  h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    color: #1B1C1E;
    font-size: 30px;
  }
  h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #1B1C1E;
    font-size: 24px;
  }
  h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #1B1C1E;
    font-size: 20px;
  }
  h5 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #1B1C1E;
    font-size: 18px;
  }
  h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #1B1C1E;
    font-size: 16px;
  }
  p,
  ul,
  ol,
  li {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #1B1C1E;
    font-size: 16px;
  }
  .col-collage a {
    width: 48%;
    height: 100px;
  }
  .col-collage a img {
    height: 100%;
  }
}