:root{ --title-color: #1e272e; --text-color: #485460; --bg-lightgrey: #f5f4fb;
  --ik-blue:#0074ad; --ik-turquoise-dark:#00d4b0; --ik-turquoise-bright:#48ead7; }

section h1, section h2, section h3, section h4, section h5, section h6{
  color: var(--title-color); font-weight: bold; }
section p{ color: var(--text-color); }

/* BOTON */
.btn-primary-ik { background-color: var(--ik-turquoise-dark);
  border-color: var(--ik-turquoise-bright); color: #fff; font-weight: 600; }
.btn-primary-ik:hover { color: #fff; background-color: #04b093; border-color: #04a98d; }
.btn-primary-ik.focus, .btn-primary-ik:focus { box-shadow: 0 0 0 .2rem rgba(72,234,215,.5); }

/* GENERIC */
.p-0{padding: 0;}
.ptb-3p{padding: 3% 0;}
.plr-3p{padding: 0 3%;}
.plr-6p{padding: 0 6%;}
.plr-12p{padding: 0 12%;}
.p-3p{padding:3%;}
.pr-15{padding-right: 15px;}
.pl-15{padding-left: 15px;}
.p-32{padding:32px;}
.m-0{margin: 0;}
.m-32{margin:32px;}
.mt-10{margin-top: 10px;}
.mt-32{margin-top: 32px;}
.mb-18{margin-bottom: 18px;}
.txt-l{text-align: left;}
.txt-c{text-align: center;}
.br-15{border-radius: 15px;}

/* HEADER */
.header-container{ height: 70px; }
#header-new{ background-image: linear-gradient(to bottom, rgba(0, 116, 173, 0.85), rgba(0, 174, 145, 0.85)), url("../images/bg-deer-test02.svg");
  background-repeat: no-repeat; background-position: bottom; background-size: 100%; height: 450px; color: #fff; }
#header-new .portada-content{ width: 100%; height: 86%; height: calc(100% - 70px); /* El 100% - el tamanio del navbar SEE: .header-container */
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#header-new .portada-content h1{ font-weight: bold; }
#header-new .portada-content p{ }

/* NAVBAR RESPONSIVE TODO: Hacer un refactor de todo el navbar responsive */
@media(max-width:991px){
  .header-container, #header-new{ height: auto; }
  #header-new .portada-content {height: auto; padding-top: 10%; padding-bottom: 10%;}
  #header-new .portada-content p { padding: 0; margin: 0; }
  /* Menú desplegable en responsive */
  #navbarSupportedContent{ background: #fff; text-align: center; border-radius: 10px;}
  .navbar-nav .nav-item{}
  /*.navbar-nav .nav-item.active .nav-link{ color: var(--title-color); font-weight: bold;}*/

  .navbar-nav .nav-item:hover,
  .navbar-nav .nav-item.active:hover{ color: #fff; font-weight: bold; background: var(--ik-turquoise-dark); }

  .navbar-nav .nav-item .nav-link  { color: var(--text-color); }
  /*.navbar-nav .nav-item.active .nav-link { color: var(--text-color); }*/

  .navbar-nav .nav-item.active .nav-link { color: var(--text-color); font-weight: bold; }
  .navbar-nav .nav-item.active .nav-link:hover{color: #fff;}

  .dropdown-menu{ border: unset; text-align: center; background: var(--bg-lightgrey); }
}

/* SERVICIOS */
.grid-container { display: grid; }
.grid-coulumns-3 {grid-template-columns: auto auto auto;}
.grid-coulumns-4 {grid-template-columns: auto auto auto auto;}
.grid-coulumns-5 {grid-template-columns: auto auto auto auto auto;}
.one-feature p, .one-feature h5{float: right;width: 85%;}
.one-feature h5{ font-weight: normal; }
.one-feature p{font-size: 15px;}
.one-feature img{ width: 10%; }
.one-feature button{ display: none;}
@media(max-width:768px){
  .servicios-grid{ grid-template-columns: repeat(auto-fit, minmax(100%, 100%)); }
  .one-feature{ margin-bottom: 10px; }
  .one-feature img{ width: 7%; }
  .one-feature h5{ margin-bottom: 0; }
  .one-feature p{ margin-top: 0; margin-bottom: 40px;}
}

/* PORTFOLIO */
#portfolio-section { background: var(--bg-lightgrey); display: flex; justify-content: center; flex-direction: column; align-items: center; }
.one-portfolio{ display: none; margin:5px!important; background: white; width: 11rem; height: 11rem; position: relative; }
.one-portfolio img { display: block; width: 100%; height: auto; }
.one-portfolio .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(255,255,255, 0.9); }
.one-portfolio:hover .overlay { opacity: 1; }
.one-portfolio h6{ text-transform: uppercase; }
.one-portfolio p {font-size: 13px; }
.one-portfolio .texto{ color: black; position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); text-align: center; width: 100%; }
@media(max-width: 1045px) {
  .one-portfolio{ width: auto; height: auto; }
}
@media(max-width: 745px) {
  #portfolio-grid{ grid-template-columns: auto auto auto; }
}
@media(max-width: 445px) {
  #portfolio-grid{ grid-template-columns: auto auto; }
}

/* NUESTRO EQUIPO */
#equipo .profile-container{ display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap;}
#equipo .perfil-img{ overflow: hidden; border-radius: 100%; margin: 10px; width: 150px; height: 150px;
  background: var(--bg-lightgrey); border: 4px solid var(--bg-lightgrey); }
#equipo .perfil-img img{ width: 100%; }
#equipo .p-name{ font-weight: 600; }
#equipo .p-rol{ text-transform: uppercase; font-size: 0.7rem; }

/* CONTACTO */
#contactarse { background: var(--bg-lightgrey); }
#contactarse .form-container { display: flex; align-items: center; justify-content: center; height: auto; /*750px;*/
  background: #fff; height: 715px; border-radius: 15px; }
#contactarse .form-container .the-form { width: 60%; /*height: 715px;*/ }
#contactarse .form-container .the-form form, #contactarse .form-container .the-form .form-title {
  width: 80%; margin: 0 auto; }
#contactarse .form-container .the-form textarea{ /*background: #000;*/ }
#contactarse .form-container .the-form input{ /*background: red;*/ }
#contactarse .form-container .the-decoration {
  /* rgba(0, 116, 173, 0.80) rgba(0, 212, 176, 0.80) */ /*--title-color-rgb: rgba(30, 39, 46, 1); --text-color-rgb: rgba(72, 84, 96, 1);*/
  background-image: linear-gradient(to bottom, rgba(30, 39, 46, 0.9), rgba(30, 39, 46, 0.9)), url("../images/bg-mountain.png");
  background-repeat: no-repeat; background-position: bottom; background-size: 100%; background-color: #d8f2ff;
  width: 40%; height: 715px; position: relative; border-top-right-radius: 15px; border-bottom-right-radius: 15px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; }
#contactarse .form-container .the-decoration .pinitos-container{ position: absolute; bottom: 0; }
#contactarse .form-container .the-decoration .pinitos-container img{ height: 730px; position: relative; left: 200px; }
#contactarse .form-container .the-decoration .deer-container{ position: absolute; bottom: 0; }
#contactarse .form-container .the-decoration .deer-container svg{ position: relative; height: 350px; left: -35px; }
.deer-color{ fill:#ead6ac; }

/* FORM MESSAGES */
#ikform .form-msg{ display: block; margin: auto; padding: 15px; width: 70%; text-align: center; border-radius: 10px; color: white; }
#ikform .form-msg-success{ background: var(--ik-blue); }
#ikform .form-msg-error{ background: #d63031; }

/* DATOS DE CONTACTO */
#contactarse .the-decoration .contact-data-container{ width: auto; border-radius: 0.8rem; padding: 0.7rem; }
#contactarse .the-decoration .contact-data-container .un-contactadata{ width: 100%; display: flex; align-items: center; }
#contactarse .the-decoration .contact-data-container .un-contactadata .icono-contactdata{
  color: #fff; height: 2.5rem; width: 2.5rem; display: flex; justify-content: center; align-items: center; margin-right: 0.5rem; }
#contactarse .the-decoration .contact-data-container .un-contactadata .txt-contactdata{ color: #fff; }
#contactarse .the-decoration .contact-data-container .hr-contactdata{ margin: 0; }
#contactarse .the-decoration .contact-data-container .hr-contactdata:last-child{ display: none; }
.contact-data-redes-container{ display: flex; flex-direction: row; text-align: center; justify-content: center; align-items: center; }
.contact-data-redes-container .una-red:first-child{ margin-left: 0; }
.contact-data-redes-container .una-red:last-child{ margin-right: 0; }
.contact-data-redes-container .una-red{ border-radius: 100%; background: #fff; margin-right: 0.5rem; margin-left: 0.5rem; }
.contact-data-redes-container .una-red:hover{ text-decoration: none; background: var(--ik-turquoise-dark);}
.contact-data-redes-container .una-red:hover i{ color: #fff; }
.contact-data-redes-container .icono-red{ height: 2.5rem; width: 2.5rem; display: flex; justify-content: center; align-items: center; }
.contact-data-redes-container .icono-red i{ color: var(--title-color); }

@media(max-width: 985px) {
  #contactarse .form-container .the-form form, #contactarse .form-container .the-form .form-title { width: 90%; }
  #contactarse .form-container{ flex-direction: column; height: auto; }
  #contactarse .form-container .the-form{ padding-top: 32px; width: 100%; }
  #contactarse .form-container .the-decoration{ width: 100%; height: 100%; padding-bottom: 5%; padding-top: 5%;
    border-top-right-radius: unset; border-bottom-left-radius: 15px; }
}
@media(max-width: 680px) {
  #contactarse { padding: unset; }
  #contactarse .form-container{ border-top: 2px solid var(--bg-lightgrey); border-top-right-radius: unset; border-top-left-radius: unset; }
}