body{
  margin: 0;
  padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

.navbar-brand,
.navbar-nav li a {
    line-height: 77px;
    height: 80px;
    padding-top: 5px;
    bottom: 0;
    font-family: 'Georgia';
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #f06823;
}

.navbar{
  border-radius: 0;
}

.spaceTop {
  margin-top: 30px;
}

.spaceTopBig {
  margin-top: 50px;
}

.goMarginBottom{
  margin-bottom: 30px;
}

.boldMe {
  font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Arial';
  font-weight: bold;
}

p, li, a {
  font-family: 'Arial';
  font-weight: normal;
  color: #4c4c4b;
}

a.more {
  color: #f06823;
}

.navbar-default .active a{
  color: #f06823 !important;
}

.text-center{
  text-align: center;
}

.smaller-text {
  font-size: 28px;
  text-transform: uppercase;
  text-shadow: 2px 2px 22px rgba(0, 0, 0, 40);
}

footer{
  background: #1c2c3a;
  color: #fff;
  padding: 10px 0;
  bottom: 0;
}

.service{
  background-color: #f3f5f5;
  padding: 5px 10px;
}

.service a{
  color: #f06823;
  cursor: pointer;
}

.service a:hover, a:focus{
  color: #f06823;
  text-decoration: underline;
  cursor: pointer;
}

.more {
  cursor: pointer;
}

.text {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 200px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topImage {
  background: url("../images/topImage.jpeg");
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 590px;
  padding: 180px 0;
  color: #ffffff;
  margin-top: 40px;
}


.topImage h1{
  text-transform: uppercase;
  text-shadow: 2px 2px 22px rgba(0, 0, 0, 40);
}

/********* Carousel Control *********/

.bx-viewport {
  -webkit-box-shadow : 0 !important;
  -moz-box-shadow: 0 !important;
  box-shadow: none !important;
}

/********* Carousel Control END *********/

.telephone-left {
  position:fixed;
  z-index:99999;
  left:0px;
  bottom:30px;
}

.telephone-left .contact-button {
  border: none;
  width: 60px;
  height: 84px;
  background-color: #f06823; /*Transform the square into rectangle, sync that value with the width/height*/
  transition: all 300ms;
  cursor:pointer;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.contact-button i{
  text-align: center;
  font-size: 50px;
  margin-top: 16px;
}

.contact-button span{
  font-size: 16px;
  color:white;
  position: absolute;
  left: 10px;
  top: 0px;
  line-height: 28px;
}


.telephone-left .contact-button:hover{
  transition: all 400ms cubic-bezier(.62,.1,.5,1);
  width:200px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}


.telephone-left .contact-button .long-text{
  transition: opacity 1000ms; /*Only the text fadein/fadeout is animated*/
  opacity:0;                /*By default we do not display the text, we want the text to fade in*/
  color:white;
  white-space: nowrap;
  font-size: 0;             /*Set to 0 to not have overflow on the right of the browser*/
  width: 0;                 /*Set to 0 to not have overflow on the right of the browser*/
  margin:0;
}

.telephone-left .contact-button .show-long-text{
  transition: opacity 700ms,
              width 1ms linear 270ms,       /*two thirds of the animation on the container width*/
              font-size 1ms linear 270ms;   /*two thirds of the animation on the container width*/
  opacity:1;                         /*Center the position vertically*/
  margin-left: 60px;                        /*Center between the + and the right end side*/
  font-size: 14px;                          /*Text size, cannot be defined initially without moving the scrollbar*/
  width: auto;
}

.show-long-text a{
  color: white;
  text-decoration: none;
}

.about-image{
  background-image: url("../images/map2.png");
  height: 500px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.white{
  padding: 100px 0;
}

.white h2{
  color: #c6c5c5;
  text-transform: uppercase;
}

.white hr{
  border-width: 3px;
  border-color: #f06823;
  text-align: center;

}


.gray{
  background-color: #f3f5f5;
}

.gray h2{
  color: #c6c5c5;
  text-transform: uppercase;
}

.gray hr{
  border-width: 3px;
  border-color: #f06823;
}

.gray p{
  color: #4c4c4b;
}

.white p{
  color: #4c4c4b;
}

.aboutIntopo {
  padding: 10px 35px;
}

#myContainer {
  width: 100% !important;
  padding-left: 0 !important;
}

#aboutImage{
  margin-right: -15px !important;
}

.orange {
  background-color: #f06823;
  padding: 20px;
}

.orange p{
  color: #fff;
}

.orange h1 {
  color: #fff;
}

/* Embeded map style*/
.google-maps {
        position: relative;
        margin-left: -14px;
        padding-bottom: 45%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
.google-maps iframe {
    position: absolute;
    width: 100% !important;
    height: 100%;
}

.maps iframe{
    pointer-events: none;
}

.techSmall p{
  font-size: 13px;
}

/* ---- Mis proyectos ----*/

.hovereffect {
    width: 285px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}
.hovereffect .overlay {
    width: 100%;
    position: absolute;
    overflow: hidden;
    left: 0;
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 4.75em;
	background: #F06823;
	color: #FFF;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.hovereffect img {
    display: block;
    position: relative;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.hovereffect:hover img {
-webkit-transform: translate3d(0,-10%,0);
	transform: translate3d(0,-10%,0);
}

.hovereffect h2 {
    text-transform: none;;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 14px;
    font-weight: normal;
    margin: 0px;
}

.hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    text-transform: none;
    font-weight: normal;
	color: #fff;
	border: 1px solid #fff;
	margin: 50px 0 0 0;
	background-color: transparent;
}
.hovereffect a.info:hover {
    box-shadow: 0 0 5px #fff;
}


.hovereffect p.icon-links a {
	float: right;
	color: #3c4a50;
	font-size: 1.4em;
}

.hovereffect:hover p.icon-links a:hover,
.hovereffect:hover p.icon-links a:focus {
	color: #252d31;
}

.hovereffect h2,
.hovereffect p.icon-links a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

.hovereffect p.icon-links a span:before {
	display: inline-block;
	padding: 8px 10px;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.hovereffect:hover .overlay,
.hovereffect:hover h2,
.hovereffect:hover p.icon-links a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.hovereffect:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.hovereffect:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.hovereffect:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.hovereffect:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}