/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Book.otf') format('opentype');
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Light.otf') format('opentype');
  font-weight: 300;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 500;
}
@font-face {
  font-family: 'Gotham';
  src: url('../fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 600;
}

* {
  font-family: 'Gotham';
  transition: all 0.5s;
}

*:focus {
outline: none;
}

:root {
  --input-padding-x: 5px;
  --input-padding-y: 5px;
  --main-color: #0078ff;
}

body {
  color: #5a5a5a;
  overflow: hidden;
  position: relative;
  height: 100%;
  overflow-y: scroll;
  background: rgba(250,250,250);
}

/*INTRO*/

#intro .modal-dialog {
  width: 100%;
  max-width: initial; 
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  display: inline-table;
}
#intro .modal-body {
  height: auto;
  padding: 0;
  background: #202020;
}

#intro .modal-content {
  border: 0;
}

.video-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  background: #202020;
}
.video-responsive video {
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
  background: #202020;
  transition: all 1s ease !important;
  opacity: 1;
}
#intro .player .like-button {
  display: none !important;
}
#intro .modal-body {
  position: relative;
}
#intro .modal-body button {
  position: absolute;
  bottom: 25px;
  right: calc(50% - 46.5px);
  opacity: 0.6;
  z-index: 300;
  outline: 0;
  transition: all 1s ease !important;
  opacity: 1;
}

#intro .modal-body button:focus, 
#intro .modal-body button:hover, 
#intro .modal-body button:active {
  opacity: 1;
}

#intro .modal-body button span  {
  color: #fff!important;
  font-size: 35px;
  font-size: 18px;
  text-transform: uppercase;
  text-shadow: 1px 0px 15px #000;
  font-weight: 500;
}

#intro {
  background: #202020;
  height: 100%;
  transition: all 1.5s ease !important;
  width: 100%;
  overflow-y: hidden;
}

#intro.hide {
  display: none !important;
  transition: all 1.5s ease !important;
}

.modal-backdrop.show {
  opacity: 1;
}
.modal-backdrop.hide {
  display: none !important;
}

@media (max-width: 991px){

  #intro,
  .modal-backdrop {
    display: none !important;
  }

  .modal-open {
    overflow: initial;
  }

  #portada-mob {
    height: 100vh;
    background-image: url(../img/portada.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
  }

  #portada-mob a {
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .mouse_scroll {
    display: block;
    margin: 0 auto;
    width: 24px;
    height: 70px;
    margin-top: 125px;
  }


  .m_scroll_arrows
  {
    display: block;
    width: 5px;
    height: 5px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    margin: 0 0 3px 4px;
    
    width: 16px;
    height: 16px;
  }


  .unu
  {
    margin-top: 1px;
  }

  .unu, .doi, .trei
  {
      -webkit-animation: mouse-scroll 1s infinite;
      -moz-animation: mouse-scroll 1s infinite;
      animation: mouse-scroll 1s infinite;
    
  }

  .unu
  {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -webkit-animation-direction: alternate;
    
    animation-direction: alternate;
    animation-delay: alternate;
  }

  .doi
  {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;
    
    animation-delay: .2s;
    animation-direction: alternate;
    
    margin-top: -6px;
  }

  .trei
  {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-direction: alternate;
    
    animation-delay: .3s;
    animation-direction: alternate;
    
    
    margin-top: -6px;
  }


  @-webkit-keyframes mouse-scroll {

    0%   { opacity: 0;}
    50%  { opacity: .5;}
    100% { opacity: 1;}
  }
  @-moz-keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
  }
  @-o-keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
  }
  @keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
  }
}

/*HEADER*/

header nav {
  transition: all 0.5s;
} 
header .navbar {
  background: linear-gradient(rgba(0,0,0,0.4) 5%, transparent);
  padding: 0 15px;
  height: 100px;
}
header.on nav {
  background: #202020 !important;
  height: 40px;
}
header .navbar-brand img {
  width: 260px;
  transition: all 0.5s;
}

header .navbar .navbar-nav {
  float: right;
}
header .navbar .navbar-nav .nav-link {
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 13px;
  line-height: 39px;
  padding-top: 0;
  padding-bottom: 0;
}
header .navbar .navbar-nav .nav-link.active {
  color: var(--main-color);
}
header .navbar .navbar-nav .nav-item:last-of-type {
  position: relative;
  margin-left: 20px;
}
header .navbar .navbar-nav .nav-item:last-of-type .nav-link {
  display: inline-block;
  font-size: 11px;
}
header .navbar .navbar-nav .nav-item:last-of-type .nav-link.active-lang {
  color: var(--main-color);
}
header .navbar .navbar-nav .nav-item:last-of-type .nav-link:first-of-type {
  padding-right: 3px;
}
header .navbar .navbar-nav .nav-item:last-of-type .nav-link:last-of-type {
  padding-left: 3px;
}

header .navbar .navbar-nav .nav-item:last-of-type hr {
  width: 1px;
  height: 12px;
  background: #fff;
  opacity: 0.5;
  display: inline-block;
  position: absolute;
  top: -4px;
  left: 48%;
}

header .last {
  margin-right: 100px;
}

header .wa {
  display: inline-block;
  background: rgb(250, 250, 250);
  color: #202020;
  border-radius: 50px;
  line-height: 28px;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  right: 80px;
  top: 36px;
  z-index: 100;
}

header.on .wa {
  top: 6px;
  transition: all 0.5;
}

header .wa i {
  margin-right: 4px;
  font-size: 18px;
  vertical-align: -2px;
  transition: none;
}

header .wa:hover {
  background: var(--main-color);
  color: #fff;
  text-decoration: none;
}

.wa
{
    -webkit-animation: rucutumbu 1s infinite;
    -moz-animation: rucutumbu 1s infinite;
    animation: rucutumbu 1s infinite;
  
}

.wa
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}


@-webkit-keyframes rucutumbu {

  0%   { transform: scale(1);}
  100% { transform: scale(1.04);}
}
@-moz-keyframes rucutumbu {

  0%   { transform: scale(1);}
  100% { transform: scale(1.04);}
}
@-o-keyframes rucutumbu {

  0%   { transform: scale(1);}
  100% { transform: scale(1.04);}
}
@keyframes rucutumbu {

  0%   { transform: scale(1);}
  100% { transform: scale(1.04);}
}

@media (max-width: 767px){
  header .last {
    margin-right: 0;
  }

  header nav {
    padding: 0 !important;
  }

  .navbar-brand {
    margin-left: 15px;
  }
  .navbar-toggler {
    margin-right: 15px;
    border: 0;
    outline: none !important;
    padding-right: 0;
  }

  header .navbar .navbar-nav {
    float: initial;
    width: 100%;
  }

  header.on .navbar .navbar-nav {
    float: initial;
    width: 100%;
    background: #202020;
  }
  header .navbar .navbar-nav li {
    text-align: center;
    height: 40px;
  }
  header .navbar .navbar-nav .nav-item:last-of-type {
    margin-left: 0;
  }

  header .navbar .navbar-nav .nav-link {
    font-size: 16px;
    line-height: 16px;
    height: 100%;
    padding: 12px 0px;
  }
  header .navbar .navbar-nav .nav-item:last-of-type .nav-link {
    font-size: 14px;
  }
  header .navbar .navbar-nav .nav-item:last-of-type hr {
    top: -4px;
    left: 49.8%;
  }

  header .wa {
    right: 60px;
  }
}

@media (max-width: 575px){
  header .navbar-brand img {
    width: 200px !important;
  } 

  header.on .navbar-brand img {
    width: 170px !important;
  } 
}

@media (max-width: 399px){
  header .navbar-brand img {
    width: 130px !important;
  } 

  header.on .navbar-brand img {
    width: 130px !important;
  } 

  header .wa {
    right: 57px;
  }
}

/*--SLIDER--*/

#index  {
  padding-top: 0;
  position: relative;
  height: 100vh !important;
}

/*#index .swiper-slider .swiper-wrapper .swiper-slide {
  width: 100%;
  height: 100%;
}
#index .swiper-slider .swiper-wrapper .swiper-slide:nth-of-type(1) {
  background: url(../img/slider/1.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 45%;
}
#index .swiper-slider .swiper-wrapper .swiper-slide:nth-of-type(2) {
  background: url(../img/slider/2.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 60%;
}
#index .swiper-slider .swiper-wrapper .swiper-slide:nth-of-type(3) {
  background: url(../img/slider/3.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 65%;
}
#index .swiper-slider .swiper-wrapper .swiper-slide:nth-of-type(4) {
  background: url(../img/slider/4.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
#index .swiper-slider .swiper-wrapper .swiper-slide:nth-of-type(5) {
  background: url(../img/slider/5.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 70%;
}
#index .swiper-slider .swiper-wrapper .swiper-slide:nth-of-type(6) {
  background: url(../img/slider/6.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 80%;
}
#index .swiper-slider .swiper-wrapper .swiper-slide:nth-of-type(7) {
  background: url(../img/slider/7.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 80%;
}
#index .swiper-slider .swiper-wrapper .swiper-slide:nth-of-type(8) {
  background: url(../img/slider/8.jpg) no-repeat;
  background-size: cover;
  background-position: 50% 55%;
}

#index .swiper-slider {
  height: 100%;
  width: 100%;
}*/

#index .slider-social {
  position: absolute;
  bottom: 10px;
  right: 25px;
  z-index: 10;
}
#index .slider-social a {
  margin-left: 10px;
  opacity: 0.5;
}
#index .slider-social a:hover {
  opacity: 1;
}
#index .slider-social a i {
  color: #fff;
  font-size: 16px;
  text-shadow: 0px 0px 7px #000;
}

#index .bannerscollection_zoominout {
  position: relative;
  height: 100vh !important;
}

#index .bannerscollection_zoominout .contentHolderVisibleWrapper {
  height: 100vh !important;
}

#index .bannerscollection_zoominout .contentHolderUnit {
  overflow: visible !important;
  height: 100vh !important;
  transition: initial !important;
}


#index .bannerscollection_zoominout .bannerControls {
  position: absolute;
  bottom: 10px;
  height: 22px;
  top: auto;
  margin-top: 0 !important;
  display: inline-block !important;
  width: 80px;
  left: 15px;
}

#index .bannerscollection_zoominout .bannerControls .rightNav {
  right: 15px;
  left: auto;
  /*bottom: 85px;*/

  background: none;
  /*width: initial;*/
  /*height: 28px;*/
  /*display: inline-block;*/
  width: 30px;
  height: 20px;
  text-align: center;
  opacity: 0.5;
  text-shadow: 0px 0px 7px #000;
  
}
#index .bannerscollection_zoominout .bannerControls .leftNav {
  right: 55px;
  left: auto;
  /*bottom: 85px;*/

  background: none;
  /*width: initial;*/
  /*height: 28px;*/
  width: 30px;
  height: 20px;
  text-align: center;
  opacity: 0.5;
  text-shadow: 0px 0px 7px #000;
  

}

#index .bannerscollection_zoominout .bannerControls .rightNav:before {
  display: inline-block;
  color: transparent !important;
  text-shadow: none;
  width: 10px;
  height: 20px;
  background: url(../img/right.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 2px;
}
#index .bannerscollection_zoominout .bannerControls .leftNav:before {
  display: inline-block;
  color: transparent !important;
  text-shadow: none;
  width: 10px;
  height: 20px;
  background: url(../img/left.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: 2px;
}

#index .bannerscollection_zoominout .bannerControls .rightNav:hover,
#index .bannerscollection_zoominout .bannerControls .leftNav:hover {
  opacity: 1;
}

#index #tri {
  position: absolute;
  bottom: 0;
  z-index: 800;
  width: 100%;
}
#index #tri polygon {
  fill: #202020;
  stroke: #202020;
  stroke-width: 0;
}




#index .bannerscollection_zoominout .bannerControls .rightNav:before {
  /*right: 15px;*/
  display: inline-block;;
  content: "\f105";
  font-family: 'FontAwesome';
  font-size: 30px;
  color: #fff;
}
#index .bannerscollection_zoominout .bannerControls .leftNav:before {
  /*right: 15px;*/
  display: inline-block;
  content: "\f104";
  font-family: 'FontAwesome';
  font-size: 30px;
  color: #fff;
}



/*GENERAL*/

/*sliders*/
.swiper-container {
  width: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

section {
  padding-top: 40px;
}

section h1 {
  font-size: 18px;
  color: #202020;
  font-weight: 600;
  margin-left: 24px;
  position: relative;
  margin-bottom: 0;
  text-transform: uppercase;
}

section h1:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 17px;
  background: var(--main-color);
  position: absolute;
  top: 0;
  left: -10px;
}


/*SERVICIOS*/

section#servicios {
  padding-top: 0;
  position: relative;
}

#nosotros {
  /*background: url(../img/servicios/f-servicios.jpg);
  background-attachment: fixed;
  background-size: initial;*/
  position: relative;
  
}

#nosotros > .container {
  position: absolute;
  top:0;
  left:0;
  z-index: 20;
  margin-top: 110px;
  margin-left: calc(50% - 570px);
}

#nosotros .jarallax {
  width: 100%;
  padding: 250px 0 95px;
  text-align: center;
  transition: initial !important;
}

#nosotros .jarallax .jarallax-img {
  transition: initial !important;
}

/*#nosotros .fondo {
  padding: 40px 0 20px;
  background: linear-gradient(#000, rgba(0,0,0,0.3), rgba(0,0,0,0.2), rgba(0,0,0,0.1));
  justify-content: center;
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
}*/

#nosotros .fondo {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#202020, rgba(0,0,0,0.3), rgba(0,0,0,0.2), rgba(0,0,0,0.1));
    z-index: 10;
}

#nosotros .logo {
  width: 20%;
}
#nosotros .logo img {
  width: 100%;
  padding-right: 60px;
}
#nosotros .somos {
  width: 40%;
}
#nosotros .somos h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 15px;
}
#nosotros .somos h2 span {
  color: var(--main-color);
}
#nosotros .somos p {
  color: #fff;
  font-size: 11px;
  font-weight: 300;
  text-align: justify;
  margin-bottom: 0;
}
#nosotros .somos p span {
  font-size: 20px;
}
#nosotros .clientes {
  margin-top: 37px;
  width: calc(40% - 30px);
  margin-left: 30px;
  position: relative;
}
/*#nosotros .clientes > div ul li h3 {
  text-transform: uppercase;
  color: #fff;
  font-size: 18px;
  float: left;
  display: inline-block;
}
#nosotros .clientes > div ul {
  display: flex;
  padding: 0;
  margin-bottom: 0;
}
#nosotros .clientes > div:first-of-type ul li:first-of-type {
  width: calc(33.33% + 25px);
  margin-left: 0;
}
#nosotros .clientes > div ul li {
  width: 16.66%;
  list-style: none;
  margin: 10px;
}
#nosotros .clientes > div:first-of-type ul li {
  margin-top: 0;
}
#nosotros .clientes > div:last-of-type ul li {
  margin-bottom: 0;
}
#nosotros .clientes > div:last-of-type ul li:first-of-type {
  margin-left: 0;
}
#nosotros .clientes > div ul li:last-of-type {
  margin-right: 0;
}
#nosotros .clientes a {
  display: inline-block;
}
#nosotros .clientes a img {
  width: 100%;
}*/

#nosotros .clientes div {
  position: absolute;
}
#nosotros .clientes div img {
  width: 100%;
}
#nosotros .clientes div:first-of-type,
#nosotros .clientes div:nth-of-type(2) {
  width: 30%;
}
#nosotros .clientes div:first-of-type {
  top: 0;
  left: 0;
}
#nosotros .clientes div:nth-of-type(2) {
  top: calc(53.36px + 20px);
  left: 0;
}


#nosotros .clientes div:nth-of-type(3) {
  width: 12.52%;
  margin-left: calc(30% + 20px);
}

#nosotros .clientes div:nth-of-type(4),
#nosotros .clientes div:nth-of-type(5),
#nosotros .clientes div:nth-of-type(6),
#nosotros .clientes div:nth-of-type(7),
#nosotros .clientes div:nth-of-type(8),
#nosotros .clientes div:nth-of-type(9) {
  width: 12.52%;
}

#nosotros .clientes div:nth-of-type(4) {
  margin-left: calc(30% + 20px + 12.52% + 20px);
  top: 0;
}
#nosotros .clientes div:nth-of-type(5) {
  margin-left: calc(30% + 20px + 12.52% + 20px);
  top: calc(53.36px + 20px);
}
#nosotros .clientes div:nth-of-type(6) {
  margin-left: calc(30% + 20px + 12.52% + 20px + 12.52% + 20px);
  top: 0;
}
#nosotros .clientes div:nth-of-type(7) {
  margin-left: calc(30% + 20px + 12.52% + 20px + 12.52% + 20px);
  top: calc(53.36px + 20px);
}
#nosotros .clientes div:nth-of-type(8) {
  margin-left: calc(30% + 20px + 12.52% + 20px + 12.52% + 20px + 12.52% + 20px);
  top: 0;
}
#nosotros .clientes div:nth-of-type(9) {
  margin-left: calc(30% + 20px + 12.52% + 20px + 12.52% + 20px + 12.52% + 20px);
  top: calc(53.36px + 20px);
}

@media (max-width: 1199px){
  #nosotros > .container {
    margin-left: calc(50% - 480px);
  }
  #nosotros .jarallax {
    padding: 255px 0 95px;
  }

  #nosotros .clientes div:nth-of-type(2) {
    top: calc(53.36px + 18px);
    left: 0;
  }

  #nosotros .clientes div:nth-of-type(3) {
    width: 12.52%;
    margin-left: calc(30% + 18px);
  }

  #nosotros .clientes div:nth-of-type(4) {
    margin-left: calc(30% + 18px + 12.52% + 18px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(5) {
    margin-left: calc(30% + 18px + 12.52% + 18px);
    top: calc(53.36px + 18px);
  }
  #nosotros .clientes div:nth-of-type(6) {
    margin-left: calc(30% + 18px + 12.52% + 18px + 12.52% + 18px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(7) {
    margin-left: calc(30% + 18px + 12.52% + 18px + 12.52% + 18px);
    top: calc(53.36px + 18px);
  }
  #nosotros .clientes div:nth-of-type(8) {
    margin-left: calc(30% + 18px + 12.52% + 18px + 12.52% + 18px + 12.52% + 18px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(9) {
    margin-left: calc(30% + 18px + 12.52% + 18px + 12.52% + 18px + 12.52% + 18px);
    top: calc(53.36px + 18px);
  }
}

@media (max-width: 991px){
  #nosotros > .container {
    margin-left: calc(50% - 360px);
    margin-top: 40px;
  }

  #nosotros .logo {
    width: 100%;
  }

  #nosotros .logo img {
    width: 140px;
    margin-bottom: 15px;
  }

  #nosotros .jarallax {
    padding: 185px 0 103px;
  }

  #nosotros .somos {
    width: 50%;
  }
  #nosotros .clientes {
    width: calc(50% - 30px);
  }

  #nosotros .clientes div:nth-of-type(2) {
    top: calc(53.36px + 16px);
    left: 0;
  }

  #nosotros .clientes div:nth-of-type(3) {
    width: 12.52%;
    margin-left: calc(30% + 16px);
  }

  #nosotros .clientes div:nth-of-type(4) {
    margin-left: calc(30% + 16px + 12.52% + 16px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(5) {
    margin-left: calc(30% + 16px + 12.52% + 16px);
    top: calc(53.36px + 16px);
  }
  #nosotros .clientes div:nth-of-type(6) {
    margin-left: calc(30% + 16px + 12.52% + 16px + 12.52% + 16px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(7) {
    margin-left: calc(30% + 16px + 12.52% + 16px + 12.52% + 16px);
    top: calc(53.36px + 16px);
  }
  #nosotros .clientes div:nth-of-type(8) {
    margin-left: calc(30% + 16px + 12.52% + 16px + 12.52% + 16px + 12.52% + 16px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(9) {
    margin-left: calc(30% + 16px + 12.52% + 16px + 12.52% + 16px + 12.52% + 16px);
    top: calc(53.36px + 16px);
  }
}


@media (max-width: 767px){

  #nosotros .jarallax {
    display: none;
  }
  #nosotros {
    background: url(../img/servicios/f-servicios.jpg) !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  
  #nosotros .container {
    position: initial;
    padding: 60px 15px;
    margin: 0 auto;
  }

  #nosotros .fondo {
    display: none;
  }

  #nosotros img {
    margin-top: 20px;
  }

  #nosotros .somos {
    width: 100%;
    padding: 0 15px;
  }
  #nosotros .clientes {
    width: 100%;
    margin-left: 0;
    margin-top: 15px;
  }

  #nosotros .clientes div:nth-of-type(2) {
    top: calc(53.36px + 27px);
    left: 0;
  }

  #nosotros .clientes div:nth-of-type(3) {
    width: 12.52%;
    margin-left: calc(30% + 27px);
  }

  #nosotros .clientes div:nth-of-type(4) {
    margin-left: calc(30% + 27px + 12.52% + 27px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(5) {
    margin-left: calc(30% + 27px + 12.52% + 27px);
    top: calc(53.36px + 27px);
  }
  #nosotros .clientes div:nth-of-type(6) {
    margin-left: calc(30% + 27px + 12.52% + 27px + 12.52% + 27px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(7) {
    margin-left: calc(30% + 27px + 12.52% + 27px + 12.52% + 27px);
    top: calc(53.36px + 27px);
  }
  #nosotros .clientes div:nth-of-type(8) {
    margin-left: calc(30% + 27px + 12.52% + 27px + 12.52% + 27px + 12.52% + 27px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(9) {
    margin-left: calc(30% + 27px + 12.52% + 27px + 12.52% + 27px + 12.52% + 27px);
    top: calc(53.36px + 27px);
  }
}

@media (max-width: 575px){

  #nosotros > .container {
    margin-left: 0;
    width: 100%; 
  }

  #nosotros > .container > .row {
    padding: 0 15px; 
  }

  #nosotros .somos {
    padding: 0;
  }

  #nosotros .clientes div:nth-of-type(3) {
    width: 12.52%;
    margin-left: calc(30% + 15px);
  }

  #nosotros .clientes div:nth-of-type(4) {
    margin-left: calc(30% + 15px + 12.52% + 15px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(5) {
    margin-left: calc(30% + 15px + 12.52% + 15px);
    top: calc(53.36px + 15px);
  }
  #nosotros .clientes div:nth-of-type(6) {
    margin-left: calc(30% + 15px + 12.52% + 15px + 12.52% + 15px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(7) {
    margin-left: calc(30% + 15px + 12.52% + 15px + 12.52% + 15px);
    top: calc(53.36px + 15px);
  }
  #nosotros .clientes div:nth-of-type(8) {
    margin-left: calc(30% + 15px + 12.52% + 15px + 12.52% + 15px + 12.52% + 15px);
    top: 0;
  }
  #nosotros .clientes div:nth-of-type(9) {
    margin-left: calc(30% + 15px + 12.52% + 15px + 12.52% + 15px + 12.52% + 15px);
    top: calc(53.36px + 15px);
  }
}

@media (max-width: 445px){
  #nosotros .jarallax {
    padding: 448px 0 120px;
  }
}


#servicios-int {
  margin: 0 auto;
  height: 513px;
}

#servicios-int > h1 {
  display: none;
  margin-top: 20px;
}

#servicios-int .swiper-container {
  width: 60%;
  float: left;
  height: 513px;
}
#servicios-int .swiper-slide {
  height: 513px;
  width: 100%;
}
#servicios-int .swiper-slide img {
  width: 100%;
  height: 100%;
}

#servicios-int .swiper-slide video {
  width: 100%;
  height: 100%;
}

#servicios-int .servicios-container {
  width: 40%;
  float: left;
  height: 100%;
  padding-top: 20px;
}
#servicios-int .servicios-container h1 {
  margin-left: 34px;
  margin-bottom: 15px;
  display: block;
}
#servicios-int .servicios-container .items-servicios {
  /*display: flex;
  flex-direction: column;*/
  height: calc(100% - 36px);
}
#servicios-int .servicios-container .items-servicios .item-servicio {
  width: 100%;
  height: 25%;
  overflow: hidden;
  border-radius: 0;
  position: relative;
  /*flex: 1;*/
  opacity: 1;
  background: none;
  padding-left: 25px;
  display: flex;
  opacity: 0.88;
}
#servicios-int .servicios-container .items-servicios .item-servicio img {
  /*padding-top: 20px;*/
  width: 115px;
  -webkit-filter: brightness(0);
  filter: brightness(0);
  /*float: left;*/
  align-self: center;
}
#servicios-int .servicios-container .items-servicios .item-servicio:after {
  display: inline-block;
  /*position: absolute;*/
  top: 0;
  right: 0;
  width: calc(100% - 115px - 20px);
  font-size: 11px;
  transition: all 0.5s;
  display: table-cell;
  /*float: right;*/
  align-self: center;
  margin-left: 20px;
  text-align: justify;
}
#servicios-int .servicios-container .items-servicios .item-servicio:first-of-type:after {
  content: 'Disponemos de los medios y el conocimiento en las ultimas tecnologías de modelado y texturizado 3D.\A Nuestros modelos están basados en escalas reales para obtener la máxima fidelidad al modelo original.\A Hacemos todo tipo de modelos, con fines gráficos, publicitarios y de armado real.';
}
#servicios-int .servicios-container .items-servicios .item-servicio:nth-of-type(2):after {
  content: 'Ofrecemos un servicio de render profesional en alta calidad a partir de un modelo 3D.\A Estas imágenes son ideales para la venta y comercialización de productos y edificios, ya que dan un mayor realismo, causando un mayor impacto visual.';
}
#servicios-int .servicios-container .items-servicios .item-servicio:nth-of-type(3):after {
  content: 'Brindamos servicio de video y animación avanzada sobre los modelos 3D.\A Los videos tienen un recorrido visual por el lugar, lo que genera en el espectador una mayor inmersión.\A Ideales para las ventas y publicidad vía redes sociales.\A Las animaciones son ideales para mostrar armados de productos y sistemas constructivos.';
}
#servicios-int .servicios-container .items-servicios .item-servicio:last-of-type:after {
  content: 'Existe la opción de generar una imagen en 360 grados parado desde un punto fijo, donde el usuario puede mover la cámara en cualquier angulo para ver la imagen como si estuviese dentro de ella.\A Es especialmente útil para proyectos de VR.';
}

body.rar-en #servicios-int .servicios-container .items-servicios .item-servicio:first-of-type:after {
  content: 'We have the means and knowledge in the latest 3D modeling and texturing technologies.\A Our models are based on real scales to obtain maximum fidelity to the original model.\A We make all kinds of models, for graphic, advertising and real development purposes.';
}
body.rar-en #servicios-int .servicios-container .items-servicios .item-servicio:nth-of-type(2):after {
  content: 'We offer a professional rendering service in high quality from a 3D model.\A These images are ideal for the sale and marketing of products and buildings, since they give a greater realism, causing a greater visual impact.';
}
body.rar-en #servicios-int .servicios-container .items-servicios .item-servicio:nth-of-type(3):after {
  content: 'We provide video service and advanced animation on 3D models.\A The videos have a visual tour of the place, which generates greater immersion in the viewer.\A Ideal for sales and advertising via social networks.\A The animations are ideal to show products and construction systems.';
}
body.rar-en #servicios-int .servicios-container .items-servicios .item-servicio:last-of-type:after {
  content: "There's the option to generate a 360 degree image stopped from a fixed point, where the user can move the camera at any angle to see the image as if it were inside it.\A It's especially useful for VR projects.";
}

#servicios-int .servicios-container .items-servicios .item-servicio.swiper-pagination-bullet-active {
  opacity: 1;
  background: none;
}

#servicios-int .servicios-container .items-servicios .item-servicio.swiper-pagination-bullet-active img {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

#servicios-int .servicios-container .items-servicios .item-servicio.swiper-pagination-bullet-active:after {
  color: var(--main-color);
}

@media (max-width: 1199px){
  #servicios-int .servicios-container .items-servicios .item-servicio:after {
    font-size: 9px;
  }
  #servicios-int .swiper-container {
    margin-top: 70px;
    height: 432px;
  }
  #servicios-int .swiper-slide {
    height: 432px;
  }

}

@media (max-width: 991px){
  #servicios-int .servicios-container .items-servicios .item-servicio:after {
    display: none;
  }

  #servicios-int > h1 {
    display: block;
  }

  #servicios-int .servicios-container h1 {
    display: none;
  }
  
  #servicios-int .swiper-container {
    width: calc(100% - 115px - 25px);
    margin-top: 25px;
  }
  #servicios-int .servicios-container {
    width: 115px;
    margin-left: 25px;
  }
  #servicios-int .servicios-container .items-servicios .item-servicio {
    padding-left: 0;
  }
}

@media (max-width: 767px){

  #servicios-int {
    height: auto;
  }
  
  #servicios-int .swiper-container {
    width: 100%;
    padding: 0 15px;
    height: 382px;
    margin-top: 15px;
  }
  #servicios-int .servicios-container {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 15px;
  }

  #servicios-int .servicios-container .items-servicios .item-servicio {
    width: 25%;
    height: auto;
    float: left;
    padding: 0 10px;
  }

  #servicios-int .servicios-container .items-servicios .item-servicio img {
    width: 100%;
  }
}

@media (max-width: 420px){
  
  #servicios-int .swiper-container {
    height: 291.75px;
  }
}


/*VIDEO*/

#video {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 300px 0;
}
#video .jarallax {
  width: 100%;
  height: 600px;
  transition: initial !important;
}

#video .jarallax iframe {
  transition: initial !important;

}

#video .rec1 {
  height: 200px;
  width: 125%;
  background: rgb(250,250,250);
  transform: rotate(-3deg);
  border: 8px solid #202020;
  position: absolute;
  top: -100px;
  left: -10%;
  z-index: 10;
}
#video .rec1 > div {
  position: absolute;
  width: 100%;
  height: 200px;
  background: rgb(250,250,250);
  border: 9px solid #202020;
  bottom: 17px;
}

#video .rec2 {
  height: 200px;
  width: 125%;
  background: rgb(250,250,250);
  transform: rotate(-3deg);
  border: 18px solid #202020;
  position: absolute;
  bottom: -100px;
  left: -10%;
  z-index: 10;
}
#video .rec2 > div {
  position: absolute;
  width: 100%;
  height: 200px;
  background: rgb(250,250,250);
  border: 9px solid #202020;
  top: 17px;
}
#video video {
  transition: initial !important;
}


@media (max-width: 767px){
  #video {
    display: none;
  }
}

/*RENDER Y VIDEO*/

#render-video h1 {
  margin-bottom: 10px;
  margin-top: 20px;
}

#render-video .items-categorias {
  background: #000;
}
#render-video .item-categoria {
  background: none;
  width: auto;
  border-radius: 0;
  height: auto;
  display: inline-block;
  margin-right: 32px;
  opacity: 1;
  padding: 8px 0;
}
#render-video .item-categoria p {
  margin: 0;
  line-height: 15px;
}
#render-video .item-categoria p:after {
  transition: all 0.5s;
  color: #fff;
  opacity: 0.5;
  font-size: 15px;
  line-height: 15px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 2px;
  display: inline-block;
}
#render-video .swiper-pagination-bullet-active p:after {
  opacity: 1;
}
#render-video .item-categoria .cat1:after {
  content: 'Exteriores';
}
#render-video .item-categoria .cat2:after {
  content: 'Interiores';
}
#render-video .item-categoria .cat3:after {
  content: 'Planta';
}
#render-video .item-categoria .cat4:after {
  content: 'Mobiliario';
}
#render-video .item-categoria .cat5:after {
  content: 'Video 3D';
}
#render-video .item-categoria .cat6:after {
  content: 'Render 360';
}
#render-video .items-categorias .container {
  position: relative;
}

#render-video  .swiper-wrapper {
  background: #000;
}

#render-video .swiper-video {
  width: 76%;
  max-width: 1250px;
  min-width: 1110px;
}

#render-video .swiper-container.swiper-container-h {
  overflow: visible;
  position: initial;
}

#render-video .swiper-video .swiper-slide img {
  width: 100%;
  transition: all 1.5s !important;
}

#render-video .swiper-container-v .swiper-slide {
  background: #000;
  /*height: 702px !important;*/
  width: 100%;
  /*max-width: 1300px;*/
}
#render-video .swiper-video .swiper-slide {
  opacity: 0.3;
  transition: opacity 0.5s;
}
#render-video .swiper-video .swiper-slide.swiper-slide-active {
  opacity: 1;
  overflow: hidden;
}

#render-video .swiper-video .swiper-slide.swiper-slide-active img:hover {
  transform: scale(1.1);

}

#render-video .swiper-video .swiper-button-next,
#render-video .swiper-video .swiper-button-prev {
  background: none;
  width: initial;
  height: 28px;
}
#render-video .swiper-video .swiper-button-next i,
#render-video .swiper-video .swiper-button-prev i {
  font-size: 33px;
  color: #fff;
  text-shadow: 0px 0px 7px #000;
}

#render-video .swiper-interiores .swiper-slide.s6,
#render-video .swiper-interiores .swiper-slide.s9,
#render-video .swiper-interiores .swiper-slide.s11,
#render-video .swiper-interiores .swiper-slide.s12,
#render-video .swiper-interiores .swiper-slide.s13 {
  width: 75% !important;
}

#render-video .swiper-planta .swiper-slide.s5,
#render-video .swiper-planta .swiper-slide.s6 {
  width: 86.8% !important;
}

#render-video .swiper-planta .swiper-slide.s7,
#render-video .swiper-planta .swiper-slide.s8,
#render-video .swiper-planta .swiper-slide.s9,
#render-video .swiper-planta .swiper-slide.s10 {
  width: 75% !important;
}

#render-video .swiper-planta .swiper-slide.s11 {
  width: 76.2% !important;
}

#render-video .swiper-mobiliario .swiper-slide:not(.s8){
  width: 75% !important;
}

#render-video .swiper-video3D .swiper-slide a,
#render-video .swiper-render360 .swiper-slide a {
  position: relative;
}
#render-video .swiper-video3D .swiper-slide a:after,
#render-video .swiper-render360 .swiper-slide a:after {
  content: "";
  height: 80px;
  width: 80px;
  background: url('../img/play.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 40px);
}

/*animacion popup*/
/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.mfp-iframe-holder .mfp-content {
    max-width: 1100px !important;
}


@media (max-width: 1199px){
  #render-video .swiper-video {
    max-width: 930px;
    min-width: 930px;
  }
}

@media (max-width: 991px){
  #render-video .swiper-video {
    max-width: 690px;
    min-width: 690px;
  }
}

@media (max-width: 767px){
  #render-video .item-categoria {
    margin-right: 15px;
    padding: 12px 0;
  }

  #render-video .swiper-video {
    max-width: 510px;
    min-width: 510px;
  }

  .swiper-button-next, .swiper-button-prev {
    display: none;
  }
}

@media (max-width: 575px){

  #render-video .item-categoria p:after {
    font-size: 13px;
  }

  #render-video .swiper-video {
    width: 90%;
    min-width: initial;
    max-width: initial;
  }
}

/* NUEVO TRABAJOS */

#render-video .categorias {
  display: flex;
  flex-flow: row wrap;
  background: #202020;
  padding: 15px 0;
}

#render-video .categorias .row {
  justify-content: space-between;
}

#render-video .categorias .item {
  flex: 0 0 calc(33.33% - 10px);
  margin-bottom: 15px;
}

#render-video .categorias .item a {
  display:block;
  position: relative;
  overflow: hidden;
}

#render-video .categorias .item a:hover img {
  transform: scale(1.05);
  opacity: 0.7;
}

#render-video .categorias .item a img {
  width: 100%;
}

#render-video .categorias .item a span {
  display: block;
  background: rgb(250,250,250);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #202020;
  text-align: center;
  padding: 7px 10px 5px;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 13px;
  font-weight: 500;
}

.modal-trabajos .modal-dialog {
  max-width: initial;
  margin: 0;
}

.modal-trabajos button {
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 10000;
  opacity: 1 !important;
  outline: none !important;
}

.modal-trabajos button:hover {
  transform: scale(1.05);
}

.modal-trabajos button span {
  color: #0078ff;
  background: #fff;
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 50px;
  line-height: 34px;
}

.modal-trabajos .modal-content {
  background: #202020;
  text-align: center;
}

.modal-trabajos .modal-body {
  text-align: center;
}

.modal-trabajos .modal-body > div {
  max-width: 1400px;
  margin: auto;
}

.modal-trabajos .modal-content img {
  max-width: 100%;
  max-height: calc(100vh - 30px);
  margin: 0 auto 15px;
}

.modal-trabajos .modal-body .video {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  margin-bottom: 15px;
}

.modal-trabajos .modal-body .video iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 991px){
  #render-video .categorias .row > div {
    flex: 0 0 calc(50% - 7.5px);
  }
}




/*PRECONTACTO*/

#precontacto {
  width: 100%;
  position: relative;
  overflow: visible;
}
#precontacto .fondo {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#202020, rgba(0,0,0,0.5));
  z-index: 10;

}
#precontacto .jarallax {
  width: 100%;
  padding: 348px 0 120px;
  text-align: center;
  transition: initial !important;
}
#precontacto .jarallax .jarallax-img {
  transition: initial !important;

}
#precontacto img {
  width: 180px;
  position: absolute;
  left: calc(50% - 90px);
  z-index: 20;
  margin-top: 180px;
}

#precontacto #tri {
  position: absolute;
  fill: rgb(250, 250, 250);
  stroke: rgb(0, 0, 0);
  stroke-width: 0;
  bottom: 0;
  z-index: 30;
}


@media (max-width: 767px){

  #precontacto .jarallax > div {
    display: none;
  }
  #precontacto .jarallax {
    background: url(../img/servicios/f-contacto.jpg) !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  #precontacto img {
    width: 140px;
    margin-top: 120px;
    left: calc(50% - 70px);
  }

  #precontacto .jarallax {
    padding: 300px 0 120px;
  }
}


@media (max-width: 575px){

  #precontacto img {
    width: 80px;
    position: absolute;
    left: calc(50% - 40px);
    z-index: 20;
    margin-top: 80px;
  }
  #precontacto .jarallax {
    padding: 190px 0 120px;
  }
}



/*CONTACTO*/

#contacto {
  width: 100%;
  margin-bottom: 30px;
}



/*FORMULARIO*/

.formulario {
  width: 100%;
  padding: 28px 15px 3px 15px;
  margin: auto auto 10px auto;
  position: relative;
}

.form-control {
  font-size: 13px;
  border-color: #333;
}

.form-label-group {
  position: relative;
  margin-bottom: 25px;
}

.form-label-group > input {
  border-radius: 20px;
  width: 100%;
  background: transparent;
}

.form-label-group > textarea {
  resize: none;
  height: 143px;
  background: transparent;
}

.form-label-group {
  position: relative;
}

.form-label-group p {
  position: absolute;
  margin: 0;
  bottom: -40px;
}
.form-label-group p ul {
  padding-left: 11px;
}
.form-label-group p ul li {
  list-style: none;
  font-size: 14px;
}

.form-label-group > textarea:focus {
  border-color: #333;
  box-shadow: initial !important;
}

.form-label-group > input {
  padding: var(--input-padding-y) 11px;
}
.form-label-group > input:focus {
  border-color: var(--main-color);
  outline: none;
  box-shadow: none;
}

.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
  position: absolute;
  top: 0;
  left: 6px;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 19px;
  color: #202020;
  font-style: italic;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
  font-size: 13px;
  background: transparent;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
  text-transform: italic;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
  text-transform: italic;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
  text-transform: italic;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
  text-transform: italic;
}

.form-label-group input::placeholder {
  color: transparent;
  text-transform: italic;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (5 / 6));
  padding-bottom: calc(var(--input-padding-y) / 6);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 6);
  padding-bottom: calc(var(--input-padding-y) / 6);
  font-size: 10px;
  line-height: 12px;
  color: #0c0c0ca6;
}

.formulario .datos {
  width: 33.33%;
  float: left;
}
.formulario .datos .form-label-group:last-of-type,
.formulario .textarea .form-label-group {
  margin-bottom: 0;
}
.formulario .textarea {
  width: calc(66.66% - 20px - 180px);
  float: left;
  margin-left: 20px;
  height: 100%;
}

.form-label-group > textarea {
  width: 100%;
  border-radius: 20px 0 0 20px;
  border-right: 0;
  padding: 5px 11px;
  font-size: 13px;
}
.form-label-group > textarea::placeholder {
  font-style: italic;
}

.formulario button {
  width: 180px;
  float: left;
  border-radius: 0 20px 20px 0;
  height: 143px;
  border: 1px solid #000;
  border-left: 0;
  background: #fff;
  color: #333;
  position: relative;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  background: transparent;
}

.formulario button span {
  font-size: 11.55px;
  transition: initial;
}

.formulario button:before {
  content: "";
  width: 1px;
  height: calc(100% - 40px);
  background: #202020;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 20px;
}

.formulario button:hover,
.formulario button:active,
.formulario button:focus {
  background: #fff !important;
  color: var(--main-color) !important;
  border-color: #000 !important; 
  box-shadow: none !important;
}

.formulario #success {
  position: absolute;
  bottom: -57px;
  margin: 0;
  width: calc(100% - 30px);
  background: none;
  border: 0;
  padding: 0;
}
.formulario #success .alert {
  padding: 0 0 0 11px;
  margin: 0;
}
.formulario #success .alert p {
  margin: 0;
  font-size: 14px;
  line-height: 19px;
}

.formulario button.close {
  display: none;
}

#contacto .social {
  width: 100%;
  padding: 0 15px;
}
#contacto .social .tel {
  width: 33%;
  float: left;
  position: relative;
}
#contacto .social .tel p {
  cursor: pointer;
  font-size: 14px;
  color: #333;
  display: inline-block;
  float: left;
  font-weight: 600;
  font-style: italic;
  margin: 0;
}
#contacto .social .tel p:hover {
  color: var(--main-color);
}
#contacto .social .tel p i {
  transform: rotate(90deg);
  font-size: 17px;
  transition: initial;
}
#contacto .social .tel a {
  font-size: 14px;
  color: #333;
  display: inline-block;
  float: right;
  font-weight: 500;
  font-style: italic;
}
#contacto .social .tel a:hover {
  text-decoration: none;
  color: var(--main-color);
}
#contacto .social .tel a i {
  transition: initial;
}
#contacto .social .tel hr {
  position: absolute;
  width: 1px;
  height: 18px;
  display: inline-block;
  background: #333;
  left: 47%;
  top: 0;
  margin: 0;
}

#contacto .social .redes {
  width: 180px;
  float: right;
}
#contacto .social .redes p {
  color: #333;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  float: left;
  margin: 0;
}

body.rar-en #contacto .social .redes p {
  font-size: 12px;
}
 
#contacto .social .redes div {
  float: right;
}
#contacto .social .redes a {
  color: #333;
  font-size: 17px;
  display: inline-block;
  float: left;
  margin-left: 20px;
  margin-top: -6px;
}
#contacto .social .redes a:hover {
  color: var(--main-color);
}
#contacto .social .redes a i {
  transition: initial;
} 


@media (max-width: 1199px){

  .formulario .datos {
    width: 40%;
  }
  .formulario .textarea {
    width: calc(60% - 20px - 180px);
  }
  #contacto .social .tel {
    width: 40%;
  }
}

@media (max-width: 991px){
  .formulario .datos {
    width: 50%;
  }
  .formulario .textarea {
    width: calc(50% - 20px - 80px);
  }
  .formulario button {
    width: 80px;
    font-size: 12px;
  }
  .formulario button span {
    font-size: 9.9px;
    transition: initial;
  }

  #contacto .social .tel {
    width: 58%;
  }

  #contacto .social .tel > * {
    display: block !important;
    float: initial !important;
  }
}

@media (max-width: 767px){
  .formulario #success {
    bottom: 12px;
    padding: 0 10px;
  }
  .formulario #success .alert {
    border-radius: 15px;
  }
  
  .formulario .datos {
    width: 100%;
    margin-bottom: 15px;
  }
  .formulario .textarea {
    width: calc(100% - 80px);
    margin-left: 0;
  }
  .formulario button {
    width: 80px;
    font-size: 12px;
  }
  .formulario button span {
    font-size: 9.9px;
    transition: initial;
  }

  .form-label-group p {
    position: absolute;
    margin: 0;
    bottom: -32px;
  }
  .form-label-group p ul li {
    font-size: 12px;
  }

  #contacto .social .tel {
    width: 50%;
  }

  .formulario .form-label-group {
    margin-bottom: 15px;
  }

  #contacto .social .tel a {
    float: initial;
  }

  #contacto .social .tel hr {
    display: none;
  }

  .cont-contacto {
    height: initial !important;
  }
}

@media (max-width: 499px){

  #contacto .social .tel,
  #contacto .social .tel p,
  #contacto .social .tel a {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  #contacto .social .redes {
    float: initial;
    margin: auto;
  }

  #map {
    margin-top: 35px;
  }
}



/*mapa*/

#map {
  line-height: 0;
  width: 100%;
}
#map iframe {
  width: 100%;
  height: 400px;
}

@media (max-width: 991px){
  .elmapa {
    display: none;
  }
}


/*FOOTER*/

footer {
  background: #202020;
  position: relative;
}

footer p {
  color: #fff;
  margin: 0;
  font-size: 11px;
  padding: 10px 15px;
  text-align: center;
  font-weight: 300;
}

footer .copy a {
  position: absolute;
  right: 15px;
}

footer .copy a img {
  height: 17px;
}

@media (max-width: 449px){

  footer .copy a {
    position: initial;
    display: block;
    margin-top: 10px;
  }

}

/* TRABAJOS EXTERNO */

body.trabajos-ext main {
  z-index: 1;
}

body.trabajos-ext .navbar-collapse {
  z-index: 10;
}

body.trabajos-ext {
  background: #202020;
}

section.showroom {
  max-width: 1430px;
  margin: auto;
}

section.showroom > div {
  padding: 0 15px 15px 15px;
  text-align: center;
}

section.showroom > div img {
  max-width: 1400px;
  width: 100%;
}

section.showroom > div.video {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  margin-bottom: 15px;
  margin-left: 15px;
  margin-right: 15px;
}

section.showroom > div.video iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.volver {
  display: block;
  width: fit-content;
  background: rgb(250, 250, 250);
  color: #202020;
  border-radius: 50px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  position: sticky !important;
  position: -webkit-sticky;
  top: 15px !important;
  margin-left: 15px;
  margin-top: 15px;
  box-shadow: 0 0 11px rgba(0,0,0,0.3);
  z-index: 5;
}

.volver i {
  vertical-align: middle;
  transition: initial;
}

.volver:hover {
  background: var(--main-color);
  color: #fff;
  text-decoration: none;
}

body.trabajos-ext h1 {
    color: rgb(250,250,250) !important;
    margin-bottom: 30px !important;
    font-weight: 500 !important;
    max-width: 1400px;
    margin: 0 15px 30px !important;
    padding-left: 15px;
}

body.trabajos-ext h1:before {
  left: 0px;
}

body.trabajos-ext header .navbar-brand img {
    width: 190px;
}