/** 
- 1200px
- 1000px
- 768px
- 320px

  */
.tab-content{
  padding-top: 250px;
}
.content-loader{
  position: fixed;
  top: 40%;
  width: 100%;
}
.carousel-fade .carousel-item {
 opacity: 0 !important;
 transition-duration: .6s !important;
 transition-property: opacity !important;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1 !important;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0 !important;
}
.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0) !important;
 transform: translate3d(0, 0, 0) !important;
}

/*.carousel-inner > .item {

    -webkit-transition: -webkit-transform 1s ease-in-out !important;
    -o-transition: -o-transform 1s ease-in-out !important;
    transition: -webkit-transform 1s ease-in-out !important;
    transition: transform 1s ease-in-out !important;
    transition: transform 1s ease-in-out,-webkit-transform 1s ease-in-out,-o-transform 1s ease-in-out !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000px !important;
    perspective: 1000px !important;

}*/

.load{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9);
  z-index: 9999;
}

body, html{
  height:100%
  font-size: 100%;

}
.title-proyect{
  padding-left: 10px;
}
.navbar{
  min-height: 40px !important;
  margin-bottom: 10px !important;
}
.main-image-proyect{
  width: 97%;
  margin: auto;
}

.main-header{
  margin-top: 15px;
}
.wrapper-main-content{
  transition: all .5s linear;
  margin: auto;
}
#ARQUITECTURA > .col-md-4
{
  padding: 0px !important;
}
.details-image .col-md-4{
  width: 33.333% !important;
  padding 7.5px 7.5px 7.5px 7.5px;
  border: none;
}
#inte .col-md-4{
  border: 2px solid;
  margin: 10px 10px 10px 10px;
  padding-left: 0px;
  padding-right: 0px;
  padding-right: 0px;
}
#arq .col-md-4{
  border: 2px solid;
  margin: 10px 10px 10px 10px;
  padding-left: 0px;
  padding-right: 0px;
  padding-right: 0px;
  /*width: 30% !important;*/
}
img{
  width: 100%;
  height: auto;
}
.container{
  width: 80%;
}
.bottom-content{
  color: rgb(164,164,164);
  width: 65%;
  padding-top: 20px;
  padding: 10px 10px;
  text-align : justify;
  margin: auto;
  clear: both;
}
.bottom-left-content{
  width: 60%;
  margin: auto;
}
.bottom-right-content{
  width: 60%;
  margin: auto;
}
.phone{
  width: 150px;
}
body{
  transition: color 2s linear;
  background: linear-gradient(to right,  rgb(64, 64, 64) 0%, rgb(64, 64, 64)  85%, rgb(84,84,84) 85%, rgb(84, 84, 84) 100%);
}
.main{
  width: 100%;
  height: 100%;

}
header{
  width: 70%;
  margin: auto;
  transition: all .5s linear;
}
.navbar{
  transition: all .5s linear;
}
.navbar-default{
  background-color: rgb(64,64,64) !important;
  border-color: rgb(64,64,64) !important;
}
.main-container{
  width: 85%;
  top: 20px;
  height: 40px;
}
#info-header-id{
  padding-right: 4%;
  transition: all .5s linear;
  float: right;
  padding-left: 30px;
  font-size: 18px;
  padding-right: 30px;
}



.info-header a{
  padding-left: 30px;
  font-size: 18px;
  padding-right: 30px;
}
.container-fluid{
  font-size: 10px;
}
.logo{
  display: inline-block;
  width: 30%;
  height: auto;
  transition: all .5s linear;
}

.header-main{
  width: 100%;
  background-color: green;

  height: 40px;
  padding-left: 40px;
  padding-right: 40px;
}
.proyect-description{
  padding-left: 16px;
  padding-right: 16px; 
  text-align: justify;
  font-size: 12px;
}
.col-sm-2 h5{
  padding-bottom: 0px !important;
  margin-bottom: 1px !important;
}
.col-sm-2 h6{
  padding-top: 0px !important;
  margin-top: 0px !important;
  padding-bottom: 10px !important;
}
.proyect-description h4{
  font-size: 14px !important;
  }
#small-logo{
  display: none;
}
.main-image-proyect
{
  max-height: 550px;
  min-height: 400px;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-bottom: 30px;
  overflow-y: hidden;
}
.main-nav{

  list-style-type: none;
}
.nav-links{
  text-decoration: none;
  float: left;
}
#col{
  width: 100%;
  margin: auto;
}
#col .col-md-4 {
    width: 30% !important;
    border: 2px solid;
    margin: 10px 10px 10px 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-right: 0px;
}
#content-las-cumbres, #content-las-lomas, #content-coral, #content-pinar, #content-sandos, #content-lobby, #content-hotel, #content-arriola{
  width: 97%;

}
a{
  text-decoration:none !important;
}
.select-proyect-gallery
{
  cursor: pointer;
}

/*------*****+----
#content-sandos .col-md-4{
 width: 25% !important;
 padding-bottom: 15px;
 padding-top: 15px;
}
#content-pinar .col-md-4{
 width: 25% !important;
 padding-bottom: 15px;
 padding-top: 15px;
}
#content-lobby .col-md-4{
 width: 25% !important;
 padding-bottom: 15px;
 padding-top: 15px;
}
#content-hotel .col-md-4{
 width: 25% !important;
 padding-bottom: 15px;
 padding-top: 15px;
}
#content-arriola .col-md-4{
 width: 25% !important;
 padding-bottom: 15px;
 padding-top: 15px;
}*/
.menu-headear{
  width: 75%;
  float: right;
}
.main-div-home{
  width: 80%;
  margin: auto;
}
.logo{
  width: 25%;
  height: auto;
  float: left;
}
#content-la-joya{
  width: 97%;
}
.black-box
{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 15%;
  height: 10%;
  float: right;
  background: rgb(32,32,32);
  z-index: -1;

}
.top
{
  width: 90%;
  background-color: rgb(32, 32, 32);
}
.left-content{
  width: 70%;
  height: 100%;
  float: left;
  background-color: rgb(124, 124, 124);
}
.right-content{
  width: 30%;
  height: 100%;
  float: left;
  background-color: rgb(88, 88, 88);
}
.clear-fix{
  clear: both;
}
.col-md-4 > p{
  padding-right: 8px;
  padding-left: 8px; 
}
body{
  margin: 0px;
}
.navbar-inverse {
  background-color: transparent !important;
  border: none !important;
}

.carousel .slide-image.active {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.carousel .slide-image {
  opacity: 0;
  display: block;
  left: 0;
  transition: opacity 4s ease-out;
}

#ARQUITECTURA, #INTERIORISMO{
  width: 70%;
  color: rgb(164,164,164) !important;
  margin: auto;
}
.img-fluid{
  height: 200px;
  min-width: auto;
}

.image-proyect{
}
.square-img {
  height: 200px;
  width: 260px;
  background-color: rgba(24,24,24,0.5);
  width: 100%;
  margin:0px auto;
  text-align:center;
}

.square.img:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.photos-gallery{
  color: rgb(164,164,164);
}
#map{
  margin: auto;
  width: 100%;
  height: 450px;
}
#CONTACTO{
  width: 100%;
  margin: auto;
  height: auto;
}
.media{
  width: 30px;
  float: right;
  height: auto;
}
#media-content{
  width: 70%;
  height: auto;
  float: right;

}
.media-data{
  width: 70%;
}
#media-content > img {
  margin: 0;

}
input{
  width: 85%;

  border-radius: 2px;
  border: 1px solid rgb(164,164,164);
  background-color: transparent;
  float: right;
}
#send-form{
  width: auto;
  color:rgb(164, 164, 164);
  padding: 4px 12px 4px 12px;
  margin-top: 4px;
  border: none;
  background-color: rgb(84,84,84)
}
textarea{
  width: 85%;
  background-color: transparent;
  border-radius: 2px;
  border: 1px solid rgb(164,164,164);
  float: right;
}
.form-container{
  padding-top: 30px;
  width: 80%;
  color: rgb(184,184,184);
  margin: auto;
}
.contact-elements{
  float: left;
}
label{
  padding: 2px 2px;
  float: left;
}
.info-contat{
  font-size 6px !important;
}
.contact-form{
  width: 60%;
  margin: auto;
  color: rgb(200, 200,200);
}
li:clicked{
  border-radius:50%;
  -webkit-border-radius:50%;
  box-shadow: 0px 0px 15px 15px #ec731e;
  -webkit-box-shadow: 0px 0px 15px 15px #ec731e;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}
/*problem

768
1024
800
1280
.
*/

.container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-right: auto;
    margin-left: auto;
}
h6{
  font-size: 10px;
}
h5{
  font-size: 12px;
}
.col-sm-8 > p{
  text-align: justify;
}
.menu{
  position: fixed; z-index: 99; 
  background: black;
  width: 100%;
}
.row{
  text-align: left;
}
.content-la-joya .col-md-4
{
  width: 33% !important;
  border: none;
  margin: 0;
}
.items{
    list-style: none;
    line-height: 3.5em; 
    text-align: left;
  }
  .items{
    padding-left: 0px; 
    list-style: none;
    line-height: 2em; 
    text-align: left;
  }
.text-title{
  width: 60%; margin: auto;
}

@media only screen and (min-width: 1200px) {

   #arq .col-md-4{
    width: 30% !important;

  }
  #inte .col-md-4{
    width: 30% !important;
  }
}
.nav-tabs > li {
    float: right !important;
}
.nav {

    display: unset !important;

}

@media only screen and (max-width: 960px) {
  .details-image .col-md-4 {
    width: 100% !important;
    border: none;
  }
  .tab-content{
    padding-top: 0px;
  }
  .navbar-header{
    width: 100%;
  }
  .main-image-proyect{
    min-height: auto;
    max-height: auto;
  }
  .nav-tabs > li.active > a
  {
    background-image: -webkit-linear-gradient(0deg, rgb(0, 0, 0) 14%, rgb(164, 164, 164) 30%,) !important;
    background-image: -moz-linear-gradient(0deg, transparent 0%, transparent 30%, rgb(124, 124, 124) 30%,rgb(124, 124, 124) 70%, transparent 70%, transparent 100%) !important;
    background-image: linear-gradient(to right, transparent 0%, transparent 30%, rgb(124, 124, 124) 30%, rgb(124, 124, 124) 70%, transparent 70%, transparent 100%) !important;

  }
  .text-title{
    100%;
  }
  #text-header{
    display: none;
  }
  #INTERIORISMO, #ARQUITECTURA{
    width: 80%;
  }
  .photos-gallery {
    width: 100% !important;
  }
  .bottom-content {
    width: 80%;
  }
  .menu
  {
    position: relative;
  }
  .items{
    padding-left: 0px; 
    list-style: none;
    line-height: 2em; 
    text-align: center;
  }
  .media-data {
    width: 100%;
   }
   .row{
    margin-right: 0px !important;
    margin-left: 0px !important;
   }
   .info-contact{
    float: none !important;
   }
   .row{
    width: 100%;
    margin: auto;
   }
   .media-content{
    float: none !important;
   }
   .contact-elements
   {
    width: 100%;
    float: none;
   }
  .info-contat {
    float: none;
  }
  .col-sm-4{
    width: 100%;
    text-align: center;
  }
  .col-sm-4 > p{
    text-align: center;
  }
  .row{
    width: 100%;
  }
  .nav-tabs > li{
    text-align: center;
  }
  .row{
    display: inline-block;
  }
  .col-md-4{
    width: 100% !important;
  }
  body {
    background: rgb(64,64,64) !important;
  }
  .contact-elements
  {
    width: 100% !important;
  }
  header{
    transition: all .5s linear;
    width: 90%;
  }
  .nav-tabs > li{
    float: none !important;
  }
  .bottom-content div{
    width: 100%;
  }
  .menu-headear{
    width: 100%;
  }
  #small-logo{
    display: block;
    position: relative;
    top: 10px;
    width: 200px;
    height: auto;
  }
  .logo{
    display: none;
  }
  .black-box{
    display: none;
  }
}

.nav-tabs{
  border: none !important;
  color: rgb(164,164,164) !important;
}
a{
  color: rgb(164,164,164) !important;
}
a:hover{
  background-color: rgb(64, 64, 64) !important;
  border: none !important;
}
.select-proyect-gallery
{
  background-image: linear-gradient(to right, rgb(64, 64, 64) 14%, rgb(124, 124, 124) 16.666667%, rgb(124, 124, 124) 33.333333%, transparent 33.333333%, transparent 100%);

}

.nav-tabs > li.active > a
{
  border: none !important;
  background-color: transparent !important;
  color: rgb(120,120,120) !important;
	background-image: -webkit-linear-gradient(0deg, rgb(0, 0, 0) 14%, rgb(164, 164, 164) 30%,);
  background-image: -moz-linear-gradient(0deg, rgb(0, 0, 0) 14%, rgb(124, 124, 124) 16.666667%, rgb(124, 124, 124) 33.333333%,transparent 33.333333%, transparent 100%);
	background-image: linear-gradient(to right, rgb(0, 0, 0) 14%, rgb(124, 124, 124) 16.666667%, rgb(124, 124, 124) 33.333333%, transparent 33.333333%, transparent 100%);
	-webkit-background-size: 30% 5px;
	-moz-background-size: 100% 1px;
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: center bottom;
}
#list2.clicked
{
  body{
    background: linear-gradient(to right,  rgb(64, 64, 64) 0%, rgb(64, 64, 64)  50%, rgb(84,84,84) 85%, rgb(84, 84, 84) 100%);
  }

}




.removed-item {
    -webkit-animation: removed-item-animation 1.5s cubic-bezier(.65,-0.02,.72,.29);
    -o-animation: removed-item-animation 1.5s cubic-bezier(.65,-0.02,.72,.29);
    animation: removed-item-animation 1.5s cubic-bezier(.65,-0.02,.72,.29);
}
.add-item {
    -webkit-animation: added-item-animation 1.5s cubic-bezier(.65,-0.02,.72,.29);
    -o-animation: added-item-animation 1.5s cubic-bezier(.65,-0.02,.72,.29);
    animation: added-item-animation 1.5s cubic-bezier(.65,-0.02,.72,.29);
}

@keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-webkit-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}
a:hover{
  cursor: pointer;
}
@-o-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}


@keyframes loading-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px)
    }
}
/* ********************************************************** add item *********************************************************** */

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  width: 12px;
  margin: auto;
  color: #ffffff;
  font-size: 5px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}