/*

Highway Template

http://www.templatemo.com/tm-520-highway

*/

body {
  font-family: 'Kanit', sans-serif;
}

body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.9);
}
/* Add a thumb */
body::-webkit-scrollbar-thumb {
    background: rgba(250, 250, 250, 0.5);
}

body, html {
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}


.page-heading {
  background-image: url(../img/Fondos/2.fw.png); /*Quienes Somos*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}	

.page-heading .heading-content em {
  font-style: normal;
  font-weight: 200;
}
.page-heading .heading-content h1 {
  font-size: 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(250,250,250,0.1);
  display: inline-block;
  margin-bottom: 0;
  margin-top: 220px;
  padding: 20px 60px;
}

.page-heading1 {
  background-image: url(../img/Fondos/3.fw.png); /*ups*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}


.page-heading1 .heading-content1 h1 {
  font-size: 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(250,250,250,0.1);
  display: inline-block;
  margin-bottom: 0;
  margin-top: 220px;
  padding: 20px 60px;
}

.page-heading1 .heading-content1 em {
  font-style: normal;
  font-weight: 200;
}

.page-heading2 {
  background-image: url(../img/Fondos/4.fw.png); /*redes datos*/ 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}


.page-heading2 .heading-content2 h1 {
  font-size: 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(250,250,250,0.1);
  display: inline-block;
  margin-bottom: 0;
  margin-top: 220px;
  padding: 20px 60px;
}

.page-heading2 .heading-content2 em {
  font-style: normal;
  font-weight: 200;
}

.page-heading3 {
  background-image: url(../img/Fondos/5.fw.png); /*redes electricas*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}


.page-heading3 .heading-content3 h1 {
  font-size: 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(250,250,250,0.1);
  display: inline-block;
  margin-bottom: 0;
  margin-top: 220px;
  padding: 20px 60px;
}

.page-heading3 .heading-content3 em {
  font-style: normal;
  font-weight: 200;
}

.page-heading4 {
  background-image: url(../img/Fondos/1.fw.png);/*data center*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}


.page-heading4 .heading-content4 h1 {
  font-size: 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(250,250,250,0.1);
  display: inline-block;
  margin-bottom: 0;
  margin-top: 220px;
  padding: 20px 60px;
}

.page-heading4 .heading-content4 em {
  font-style: normal;
  font-weight: 200;
}

.page-heading5 {
  background-image: url(../img/Fondos/6.fw.png);/*venta de ups*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}


.page-heading5 .heading-content5 h1 {
  font-size: 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(250,250,250,0.1);
  display: inline-block;
  margin-bottom: 0;
  margin-top: 220px;
  padding: 20px 60px;
}

.page-heading5 .heading-content5 em {
  font-style: normal;
  font-weight: 200;
}

.page-heading6 {
  background-image: url(../img/Fondos/7.fw.png);/*blogs*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}


.page-heading6 .heading-content6 h1 {
  font-size: 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(250,250,250,0.1);
  display: inline-block;
  margin-bottom: 0;
  margin-top: 220px;
  padding: 20px 60px;
}

.page-heading6 .heading-content6 em {
  font-style: normal;
  font-weight: 200;
}

.page-heading7 {
  background-image: url(../img/Fondos/8.fw.png);/*blogs*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}


.page-heading7 .heading-content7 h1 {
  font-size: 32px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  background-color: rgba(250,250,250,0.1);
  display: inline-block;
  margin-bottom: 0;
  margin-top: 220px;
  padding: 20px 60px;
}

.page-heading7 .heading-content7 em {
  font-style: normal;
  font-weight: 200;
}



/* Nav Bar */

nav .logo {
  float: left;
  margin-left: 20px; /* ubicacion logo */
  position: fixed;
  top:10px;
 
}

nav .logo a {
  font-size: 28px;
  line-height: 40px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.5px;
  
  
}

nav .logo em {
  font-style: normal;
  font-weight: 200;
  		
}

nav {
  background: #23364B; /* color del fondo del menu ppal */
  height: 60px; /* tamaño del fondo del menu ppal */
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 300;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
}


#video-container  {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

#video-container video,
.video-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

#video-container .video-overlay {
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  width: 100%;
}

#video-container .video-content {
  z-index: 99999;
  position: absolute;
  height: 100%;
  width: 100%;
}

#video-container .video-content .inner {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}

#video-container .video-content .inner h1 {
  font-size: 64px;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
}

#video-container .video-content .inner em {
  font-style: normal;
  font-weight: 200;
}


#video-container .video-content .inner p {
  color: #fff;
  font-size: 22px;
  font-weight: 200;
  letter-spacing: 1.5px;
  text-align: center;
  padding: 0px 30px;
}

#video-container .video-content .inner a {
  color: #fff;
  text-decoration: underline;
}

#video-container .video-content .inner .scroll-icon {
  margin-top: 0px;  /*ubicacion de la flecha y logo del scroll*/
}

.full-screen-portfolio .container-fluid,
.full-screen-portfolio .col-md-4, .col-md-8 {
  padding-left: 0px;
  padding-right: 0px;
}


.portfolio-item img {
  width: 100%;
  overflow: hidden;
}

.portfolio-item .thumb {
  position: relative;
}


.portfolio-item .hover-effect .hover-content {
    position: absolute;
    text-align: left;
    width: 100%;
    bottom: 0;
    left: 0;
}


.full-screen-portfolio .portfolio-item h1 {
  position: relative;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  padding-left: 20px;
  line-height: 15px;
  transform: translateY(25px);
  transition: .5s ease-in-out;
  letter-spacing: 0.5px;
 }

 .full-screen-portfolio .portfolio-item em {
  font-style: normal;
  font-weight: 200;
 }

.full-screen-portfolio .portfolio-item:hover h1 {
  transform: translateY(0);
 }

.full-screen-portfolio .portfolio-item p {
  padding-left: 20px;
  font-weight: 300!important;
  letter-spacing: 0.5px;
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: .5s ease-in-out;
  text-transform: uppercase;
 }

 .full-screen-portfolio .portfolio-item {
 text-align: center;
 line-height: 150%;
 text-transform: lowercase;
 cursor: pointer;
}

.full-screen-portfolio .portfolio-item:hover p {
  opacity: 1;
  transform: translateY(0);
 }




.popup-icon {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 300;
  display: inline-block;
  width: 60px;
  height: 60px;
}

.popup-icon button {
  background-color: transparent;
  outline: none;
  border: none;
}

.modal-btn img {
  width: 60px;
  height: 60px;
  	
}

/* Modal */
.modal {
  background-color: rgba(0,0,0,.95);
  display: none;
  overflow: auto;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: all 0.6s;
  overflow: scroll;
}

.modal::-webkit-scrollbar {
  display: none;
}

/* Modal Content */
.modal-content {
  text-align: center;
  position: relative;
  top: 0;
  width: 100%;
  margin: 0 auto;
  background-color: transparent;
}
.modal-animated-in {
  animation: totop-in .6s ease;
}
.modal-animated-out {
  animation: totop-out .6s ease forwards;
}
.modal-header {
  border-bottom: none;
}
.modal-header h3 {
  color: #fff;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 64px;
  margin-top: 5%;
  border-bottom: none;
  margin-bottom: 20px;
}

.modal-header em {
  font-style: normal;
  font-weight: 200;
}

.modal-content .close-btn {
  position: absolute;
  z-index: 99999999;
  color: #fff;
  right: 38px;
  top: 15px;
  width: 50px;
  height: 50px;
  text-align: center;
  cursor: pointer;
}

.modal-body {
  text-align: center;
  margin: 0 auto;
}

.modal-body input {
  border-radius: 5px;
  padding-left: 15px;
  font-size: 14px;
  font-weight: 200;
  color: #fff;
  background-color: rgba(250, 250, 250, 0.15);
  outline: none;
  border: none;
  box-shadow: none;
  line-height: 40px;
  height: 40px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}

.modal-body textarea {
  border-radius: 5px;
  padding-left: 15px;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 200;
  color: #fff;
  background-color: rgba(250, 250, 250, 0.15);
  outline: none;
  border: none;
  box-shadow: none;
  height: 165px;
  max-height: 220px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  margin-bottom: 25px;
}

.modal-body button {
  border-radius: 0px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  background-color: transparent;
  color: #fff;
  letter-spacing: 2px;
  border-bottom: 3px solid #fff;
  display: inline-block;
  padding: 0px 0px 3px 0px;
  transition: all 0.5s;
  border-top: none;
  border-right: none;
  border-left: none;
}

.modal-body button:hover {
  color: rgba(250,250,250,0.5);
  border-color: rgba(250,250,250,0.5);
  outline: none;
}

/* Keyframes */
@keyframes totop-in {
  0% {
    top: 600px;
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
  }  
}

@keyframes totop-out {
  0% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: -100%;
    opacity: 0;
  }  
}






.masonry-portfolio .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

.masonry .col-md-4, .masonry .col-md-8 {
  padding-right: 0px;
  padding-left: 0px;
}

.masonry {
  width: 100%;
  background-color: transparent;
  position: relative;
}

.masonry .item {
  display: inline-block;
  float: left;
}

.masonry .first-item {
  margin-bottom: -0.5px;
}

.masonry .last-item {
  float: left;
}

.masonry .item img {
  width: 100%;
  overflow-y: hidden;
}

.masonry .item .thumb {
  position: relative;
}

.masonry .item .hover-effect .hover-content {
    position: absolute;
    text-align: left;
    width: 100%;
    bottom: 5px;
    left: 0;
}


.masonry .item h1 {
  position: relative;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  padding-left: 20px;
  line-height: 15px;
  transform: translateY(25px);
  transition: .5s ease-in-out;
  letter-spacing: 0.5px;
 }

.masonry .item em {
  font-style: normal;
  font-weight: 200;
 }

.masonry .item:hover h1 {
  transform: translateY(0);
 }

.masonry .item p {
  padding-left: 20px;
  font-weight: 300!important;
  letter-spacing: 0.5px;
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: .5s ease-in-out;
  text-transform: uppercase;
 }

.masonry .item {
 text-align: center;
 line-height: 150%;
 text-transform: lowercase;
 cursor: pointer;
}

.masonry .item:hover p {
  opacity: 1;
  transform: translateY(0);
 }




.grid-portfolio {
  padding: 65px 0px;
  background-color: #232323;
}

.grid-portfolio .portfolio-item {
  margin: 15px 0px;
}

.portfolio-item .hover-effect .hover-content {
    position: absolute;
    text-align: left;
    width: 100%;
    bottom: 5px;
    left: 0;
}


.grid-portfolio .portfolio-item h1 {
  position: relative;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  padding-left: 20px;
  line-height: 15px;
  transform: translateY(25px);
  transition: .5s ease-in-out;
  letter-spacing: 0.5px;
 }

 .grid-portfolio .portfolio-item em {
  font-style: normal;
  font-weight: 200;
 }

.grid-portfolio .portfolio-item:hover h1 {
  transform: translateY(0);
 }

.grid-portfolio .portfolio-item p {
  padding-left: 20px;
  font-weight: 300!important;
  letter-spacing: 0.5px;
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: .5s ease-in-out;
  text-transform: uppercase;
 }

.grid-portfolio .portfolio-item:hover p {
  opacity: 1;
  transform: translateY(0);
 }

 .grid-portfolio .load-more-button {
  margin-top: 15px;
 }

 .grid-portfolio .load-more-button a {
  width: 100%;
  height: 80px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  color: #fff;
  background-color: #313131;
  transition: all 0.5s;
 }

 .grid-portfolio .load-more-button a:hover {
  color: rgba(250,250,250,0.5);
 }




 .services {
  background-color: #232323;
  padding: 65px 0px;
 }

 .services .service-item {
  margin: 15px 0px;
  padding: 20px;
  text-align: center;
  transition: all 0.5s;
 }

  .services .service-item:hover {
    background-color: #313131;
  }

 .services .service-item .icon {
  width: 50px;
  height: 50px;
  text-align: center;
  display: inline-block;
  line-height: 50px;
 }

.services .service-item .icon img {
  max-width: 100%;
}

.services .service-item h4 {
  margin-top: 20px;
  color: #fff;
  font-size: 20px;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  font-weight: 300;
}

.services .service-item p {
  color: #bbb;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}



.more-about-us {
  background-image: url(../img/about_us.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  width: 100%;
  text-align: center;
}

.more-about-us .content {
  background-color: rgba(0,0,0,0.8);
  text-align: left;
  padding: 150px 60px;
  color: #fff;
}

.more-about-us .content h2 {
  margin-top: 0px;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.more-about-us .content span {
  font-size: 16px;
  font-weight: 200;
  display: inline-block;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

.more-about-us .content p {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
}

.more-about-us .content .simple-btn {
  margin-top: 30px;
}

.more-about-us .content .simple-btn a {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  background-color: transparent;
  color: #fff;
  letter-spacing: 2px;
  border-bottom: 3px solid #fff;
  padding-bottom: 3px;
  text-decoration: none;
  transition: all 0.5s;
}

.more-about-us .content .simple-btn a:hover {
  opacity: 0.5;
}



.pricing-tables {
  padding: 65px 0px;
  background-color: #232323;
}

.pricing-tables .table-item {
  padding: 60px 0px;
  margin: 15px 0px;
  text-align: center;
  background-color: #313131;
}

.pricing-tables .table-item h4 {
  margin-top: 0px;
  font-size: 36px;
  font-weight: 200;
  color: #f4dd5b;
  letter-spacing: 0.5px;
}

.pricing-tables .table-item span {
  font-size: 17px;
  display: inline-block;
  color: #aaa;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  border-bottom: 1px solid #414141;
  width: 100%;
  padding-bottom: 40px;
}

.pricing-tables .table-item ul {
  list-style: none;
  padding: 0;
  margin-top: 35px;
}

.pricing-tables .table-item ul li {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.5px;
  margin: 15px 0px;
}

.pricing-tables .table-item .simple-btn {
  margin-top: 40px;
  padding-bottom: 10px;
}

.pricing-tables .table-item .simple-btn a {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  background-color: transparent;
  color: #f4dd5b;
  letter-spacing: 2px;
  border-bottom: 3px solid #f4dd5b;
  padding-bottom: 3px;
  text-decoration: none;
  transition: all 0.5s;
}

.pricing-tables .table-item .simple-btn a:hover {
  opacity: 0.5;
}

.pricing-tables .premium-item {
  background-color: #f4dd5b;
}

.pricing-tables .premium-item h4, .pricing-tables .premium-item span, .pricing-tables .premium-item ul li, .pricing-tables .premium-item .simple-btn a {
  color: #232323;
  border-color: #232323;
}



.blog-entries {
  padding: 80px 0px;
  background-color: #232323;
}


.blog-entries .blog-posts {
  margin-right: 30px;
}


.blog-post {
  border-bottom: 1px solid #414141;
  padding-bottom: 65px;
  margin-bottom: 60px;
}

.blog-post img {
  width: 100%;
  overflow-y: hidden;
}

.blog-post .text-content {
  margin-top: 30px;
}

.blog-post .text-content span {
  font-size: 16px;
  font-weight: 200;
  color: #fff;
  letter-spacing: 0.5px;
}

.blog-post .text-content span a {
  color: #f4dd5b;
  text-decoration: none;
}

.blog-post .text-content h2 {
  margin-top: 5px;
  font-size: 36px;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  font-weight: 300;
}

.blog-post .text-content p {
  color: #bbb;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  margin-top: 20px;
}

.blog-post .text-content .simple-btn {
  margin-top: 25px;
}

.blog-post .text-content .simple-btn a {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  background-color: transparent;
  color: #fff;
  letter-spacing: 2px;
  border-bottom: 3px solid #fff;
  padding-bottom: 3px;
  text-decoration: none;
  transition: all 0.5s;
}

.blog-post .text-content .simple-btn a:hover {
  opacity: 0.5;
}

.blog-entries .page-number {
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-entries .page-number li {
  display: inline-block;
  margin-right: 3px;
}

.blog-entries .page-number li:last-child {
  margin-right: 0px;
}

.blog-entries .page-number li.active a {
  color: #232323;
  background-color: #fff;
}

.blog-entries .page-number li.active a:hover {
  opacity: 1;
}

.blog-entries .page-number li a {
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 50px;
  text-align: center;
  background-color: #414141;
  transition: all 0.5s;
}

.blog-entries .page-number li a:hover {
  opacity: 0.5;
}

.single-blog-post {
  margin-right: 30px;
}

.single-blog-post img {
  width: 100%;
  overflow-y: hidden;
}

.single-blog-post .text-content {
  margin-top: 20px;
}

.single-blog-post .text-content span {
  font-size: 16px;
  font-weight: 200;
  color: #fff;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #414141;
  padding-bottom: 25px;
  display: inline-block;
  width: 100%;
  margin-bottom: 0px;
}

.single-blog-post .text-content span a {
  color: #f4dd5b;
  text-decoration: none;
}

.single-blog-post .text-content h2 {
  margin-top: 0px;
  font-size: 36px;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  font-weight: 300;
}

.single-blog-post .text-content p {
  color: #bbb;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.single-blog-post .tags-share {
  border-top: 1px solid #414141;
  border-bottom: 1px solid #414141;
  padding: 8px 0px 10px 0px;
}

.single-blog-post .tags-share ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.single-blog-post .tags-share ul li:first-child {
  color: #fff;
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0.5px;
}

.single-blog-post .tags-share ul li {
  display: inline-block;
  color: #fff;
}

.single-blog-post .tags-share ul li a {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0.5px;
  color: #f4dd5b;
  text-decoration: none;
  transition: all 0.5s;
}

.single-blog-post .tags-share ul li a:hover {
  opacity: 0.5;
}

.single-blog-post .tags-share .share {
  text-align: right;
}

.blog-entries .search input {
  background-color: rgba(250,250,250,0.1);
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  border-radius: 0px;
  outline: none;
  border: none;
}

.sidebar-heding h2 {
  font-size: 20px;
  text-transform: capitalize;
  color: #fff;
  margin-top: 40px;
  letter-spacing: 0.5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #414141;
  margin-bottom: 20px;
}

.archives ul, .categories ul {
  margin-top: -5px;
  padding: 0;
  list-style: none;
}

.archives ul li, .categories ul li {
  margin-bottom: 12px; 
}

.archives ul li:last-child, .categories ul li:last-child {
  margin-bottom: 0px; 
}

.archives ul li a, .categories ul li a {
  font-size: 15px;
  font-weight: 200;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: all 0.5s;
}


.archives ul li a:hover, .categories ul li a:hover {
  opacity: 0.5;
}

.recent-posts ul {
  padding: 0;
  list-style: none;
}

.recent-posts ul li {
  margin-bottom: 15px;
}

.recent-posts ul a {
  text-decoration: none;
}

.recent-posts ul li img {
  display: inline-block;
  max-width: 100%;
  margin-right: 15px;
}

.recent-posts ul li .text {
  display: inline-block;
}

.recent-posts ul li h6 {
  margin-bottom: 5px;
  padding-top: 0px;
  margin-top: 0px;
  display: block;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.5px;
}

.recent-posts ul li span {
  display: inline-block;
  font-size: 14px;
  font-weight: 200;
  color: #f4dd5b;
}


.latest-gallery ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.latest-gallery ul li {
  display: inline-block;
  max-width: 59px;
  overflow-y: hidden;
  margin-bottom: 3px;
  margin-right: 1px;
}

.latest-gallery ul li:nth-child(4){
  margin-right: 0px;
}

.latest-gallery ul li:nth-child(8){
  margin-right: 0px;
}

.latest-gallery ul li img {
  width: 100%;
  transition: all 0.5s;
}

.latest-gallery ul li img:hover {
  cursor: pointer;
  opacity: 0.5;
}




@media (max-width: 530px) {

  .modal-header h3 {
    margin-top: 15%;
  }

  .modal-body input {
    width: 100%;
  }

  .modal-body textarea {
    width: 100%;
  }

  .modal-content {
    padding-bottom: 40px;
  }

  .grid-portfolio {
    padding: 0px 0px;
  }

  .grid-portfolio .portfolio-item {
    margin: 30px 0px;
  }

  .grid-portfolio .load-more-button {
    padding-bottom: 30px;
  }

  .more-about-us .content {
    padding: 60px 30px;
  }

}


@media (max-width: 992px) {

  .blog-entries .blog-posts {
    margin-right: 0px;
  }

  .single-blog-post {
    margin-right: 0px;
    margin-bottom: 80px;
  }

  .blog-entries .page-number {
    margin-bottom: 80px;
  }

  .single-blog-post .tags-share .tags {
    text-align: center;
  }

  .single-blog-post .tags-share .share {
    text-align: center;
  }

}

/*==============================================
03. CONTACTO
================================================*/

.formulariocontact {
padding:8px;
border: 1px solid #CCC;
border-radius:4px;
outline:none;
font-size:14px;
background: whiteSmoke;
}
.formulariocontact:focus {
background: #000000FF;
}

/*==============================================
04. footer
================================================*/

#myFooter {
    background-color: #182c39;
    color: white;
    padding-top: 20px;
}

#map-container {
    height: 240px;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 10px;
}

#myFooter .row {
    margin: 0 85px;
}

#myFooter .footer-copyright {
    background-color: #10222e;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
}

#myFooter .footer-copyright p {
    margin: 10px;
    color: #ccc;
}

#myFooter .container {
    width: auto;
}

#myFooter ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7;
}

#myFooter h5 {
    font-size: 18px;
    color: #0DADEF;
    font-weight: bold;
    margin-top: 30px;
}

#myFooter a {
    color: #d2d1d1;
    text-decoration: none;
}

#myFooter a:hover,
#myFooter a:focus {
    text-decoration: none;
    color: #0DADEF;
}

#myFooter .social-networks {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 38px;
}

#myFooter .fa {
    font-size: 30px;
    margin-right: 15px;
    margin-left: 20px;
    background-color: white;
    color: #182c39;
    border-radius: 51%;
    padding: 10px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 31px;
    text-decoration: none;
    transition: color 0.2s;
}

#myFooter .fa-envelope:hover {
    color: #D10202;
}

#myFooter .fa-envelope:focus {
    color: #D10202;
}

#myFooter .fa-whatsapp:hover {
    color: #0B9E05;
}

#myFooter .fa-whatsapp:focus {
    color: #0B9E05;
}

#myFooter .fa-feed:hover {
    color: #ee802f;
}
#myFooter .fa-feed:focus {
    color: #ee802f;
}

#myFooter .fa-facebook:focus {
    color: #3b5998;
}
#myFooter .fa-facebook:hover {
    color: #3b5998;
}

myFooter .fa-linkedin:focus {
    color: #3b5998;
}
#myFooter .fa-linkedin:hover {
    color: #3b5998;
}

@media screen and (max-width: 767px) {
    #myFooter {
        text-align: center;
    }
    #myFooter .row {
        margin: 0;
    }
}
/*==============================================
05. ESTRUCTURA SERVICIOS
================================================*/
* {
  box-sizing: border-box;
  font-weight: normal;
}

h1 {
  font-size: 2.2em;
}

.flip {
  position: relative;
}
.flip > .front,
.flip > .back {
  display: block;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: .5s;
  transition-property: transform, opacity;
}
.flip > .front {
  transform: rotateY(0deg);
}
.flip > .back {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: rotateY(-180deg);
}
.flip:hover > .front {
  transform: rotateY(180deg);
}
.flip:hover > .back {
  opacity: 1;
  transform: rotateY(0deg);
}
.flip.flip-vertical > .back {
  transform: rotateX(-180deg);
}
.flip.flip-vertical:hover > .front {
  transform: rotateX(180deg);
}
.flip.flip-vertical:hover > .back {
  transform: rotateX(0deg);
}

.flip {
  position: relative;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 1em;
  width: 400px;
}
.flip > .front,
.flip > .back {
  display: block;
  color: white;
  width: inherit;
  background-size: cover !important;
  background-position: center !important;
  height: 220px;
  padding: 1em 2em;
  background-image: url(../img/servicios/back.fw.png);
  border-radius: 10px;
}
.flip > .front p,
.flip > .back p {
  font-size: 0.9125rem;
  line-height: 160%;
  color: #999;
}

.text-shadow {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
}


    .btn-pdf{
    background-color: #c0392b;
    border-color: #a53327 !important;
    color: #fff;
  }

  .btn-pdf:hover{
    background-color: #a53327;
    color: #fff;
  }

  .btn-pdf2{
    background-color: #306794;
    border-color: #354CB8 !important;
    color: #fff;
  }

  .btn-pdf2:hover{
    background-color: #11368C;
    color: #fff;
  }

/*==============================================
05. MENU PRINCIPAL
================================================*/

*,
:after,
:before {
 box-sizing: border-box
}
		
.clearfix:after,
.clearfix:before {
content: '';
display: table
}

.clearfix:after {
clear: both;
display: block
}

ul{
list-style:none;
margin: 0;
padding: 0;
}
			a, a:hover, a.active, a:active, a:visited, a:focus{
			color:#fefefe;
			text-decoration:none;
			}
			.content{
			margin: 50px 100px 0px 250px; /*ubicacion del text del menu en margenes top, right, left*/
			}
			.exo-menu{
			width: 1100px;  /*ancho del menu dropdown*/
			float: left;
			list-style: none;
			position:fixed;
			background: #23364B; 
			top:0;	/*ubicacion del menu parte superior*/
			}
			
			.exo-menu > li {	
				display: inline-block;
			    float:right;}
			
			.exo-menu > li > a{
				color: #ccc;
				text-decoration: none;
				text-transform: uppercase;
				border-right: 1px #365670 dotted;
				-webkit-transition: color 0.2s linear, background 0.2s linear;
				-moz-transition: color 0.2s linear, background 0.2s linear;
				-o-transition: color 0.2s linear, background 0.2s linear;
				transition: color 0.2s linear, background 0.2s linear;
				
			}
			.exo-menu > li > a.active,
			.exo-menu > li > a:hover,
			li.drop-down ul > li > a:hover{
				background:#009FE1;
				color:#fff;
			}
			.exo-menu i {
				float: left;  /* ubicacion iconos de fa fa en el menu superiror*/
  				font-size: 18px;
				margin-right: 6px;
				line-height: 20px !important;
				
			}
			li.drop-down,
			.flyout-right,
			.flyout-left{position:relative;}
			li.drop-down:before {
				content: "\f103";
				color: #fff;
  				font-family: FontAwesome;
  				font-style: normal;
				display: inline;
  				position: absolute;
  				right: 6px;
  				top: 20px;   /*ubicacion flecha del menu*/
				font-size: 14px;
			}
			li.drop-down>ul{
			left: 0px;
			min-width: 230px;

			}
			.drop-down-ul{display:none;}
			.flyout-right>ul,
			.flyout-left>ul{
				top: 0;
				min-width: 230px;
				display: none;
				border-left: 1px solid #365670;
			}

			li.drop-down>ul>li>a,
			.flyout-right ul>li>a ,
			.flyout-left ul>li>a {
				color: #fff;
				display: block;
				padding: 20px 22px;
				text-decoration: none;
				background-color: #365670;
				border-bottom: 1px dotted #547787;
				-webkit-transition: color 0.2s linear, background 0.2s linear;
				-moz-transition: color 0.2s linear, background 0.2s linear;
				-o-transition: color 0.2s linear, background 0.2s linear;
				transition: color 0.2s linear, background 0.2s linear;
			}
			.flyout-right ul>li>a ,
			.flyout-left ul>li>a {
				border-bottom: 1px dotted #B8C7BC;
			}
			/*Flyout Mega*/
			.flyout-mega-wrap {
				top: 0;
				right: 0;
				left: 100%;
				width: 100%;
				display:none;
				height: 100%;
				padding: 15px;
				min-width: 742px;

			}
			h4.row.mega-title {
				color:#eee;
				margin-top: 0px;
  				font-size: 14px;
  				padding-left: 15px;
  				padding-bottom: 13px;
  				text-transform: uppercase;
  				border-bottom: 1px solid #ccc;
				text-align: left; /*alineacion del texto en el menus li*/
 			}
			.flyout-mega ul > li > a {
				font-size: 90%;
				line-height: 25px;
				color: #fff;
				font-family: inherit;
			}
			.flyout-mega ul > li > a:hover,
			.flyout-mega ul > li > a:active,
			.flyout-mega ul > li > a:focus{
				text-decoration: none;
				background-color: transparent !important;
				color: #ccc !important
			}
			/*mega menu*/

			.mega-menu {
				left: 0;
				right: 0;
				padding: 15px;
				display:none;
				padding-top: 0;
				min-height: 100%;
	

			}
			h4.row.mega-title {
  			color: #eee;
  			margin-top: 0px;
  			font-size: 14px;
  			padding-left: 15px;
  			padding-bottom: 13px;
  			text-transform: uppercase;
  			border-bottom: 1px solid #547787;
  			padding-top: 15px;
  			background-color: #365670
  			}
 			.mega-menu ul li a {
				line-height: 25px;
				font-size: 90%;
  				display: block;
				text-align: left; /*alineacion del texto en el menus li*/
			}
			ul.stander li a:hover{ /*hover del submenu en color azul*/
				background:#009FE1;
				color:#fff;
			}
			
			
			ul.description li {
				padding-bottom: 12px;
				line-height: 8px;
			}

			ul.description li span {
				color: #ccc;
				font-size: 85%;
			}
			a.view-more{
  			border-radius: 1px;
  			margin-top:15px;
  			background-color: #009FE1;
  			padding: 2px 10px !important;
  			line-height: 21px !important;
  			display: inline-block !important;
			}
			a.view-more:hover{
			color:#fff;
			background:#0DADEF;
			}
			ul.icon-des li a i {
				color: #fff;
				width: 35px;
				height: 35px;
				border-radius: 50%;
				text-align: center;
				background-color: #009FE1;
				line-height: 35px !important;
			}

			ul.icon-des li {
				width: 100%;
				display: table;
				margin-bottom: 11px; 
			}
			/*Blog DropDown*/
			.Blog{
			left:0;
			display:none;
			color:#fefefe;
			padding-top:15px;
			background:#547787;
			padding-bottom:15px;
			}
			.Blog .blog-title{
			color:#fff;
			font-size:15px;
			text-transform:uppercase;

			}
			.Blog .blog-des{
			color:#ccc;
			font-size:90%;
			margin-top:15px;
			}
			.Blog a.view-more{
				margin-top:0px;
			}
			/*Images*/
			.Images{
				left:0;
				width:100%;
				display:none;
				color:#fefefe;
				padding-top:15px;
				background:#547787;
				padding-bottom:15px;
			}
			.Images h4 {
  			font-size: 15px;
  			margin-top: 0px;
  			text-transform: uppercase;
			}
			/*common*/
			.flyout-right ul>li>a ,
			.flyout-left ul>li>a,
			.flyout-mega-wrap,
			.mega-menu{
				background-color: #547787;
			}

			/*hover*/
			.Blog:hover,
			.Images:hover,
			.mega-menu:hover,
			.drop-down-ul:hover,
			li.flyout-left>ul:hover,
			li.flyout-right>ul:hover,
			.flyout-mega-wrap:hover,
			li.flyout-left a:hover +ul,
			li.flyout-right a:hover +ul,
			.blog-drop-down >a:hover+.Blog,
			li.drop-down>a:hover +.drop-down-ul,
			.images-drop-down>a:hover +.Images,
			.mega-drop-down a:hover+.mega-menu,
			li.flyout-mega>a:hover +.flyout-mega-wrap{
				display:block;
			}
			/*responsive*/
 			@media (min-width:767px){
				.exo-menu > li > a{
					display:block;
					padding: 20px 22px;
 			}
				.mega-menu, .flyout-mega-wrap, .Images, .Blog,.flyout-right>ul,
				.flyout-left>ul, li.drop-down>ul{
					position:absolute;
				}
 			.flyout-right>ul{
				left: 100%;
				}
			.flyout-left>ul{
				right: 100%;
				}
 	}
			@media (max-width:767px){
			.exo-menu {
				min-height: 58px;
				background-color: #23364B;
				width: 100%;
			}
	
			.exo-menu > li > a{
				width:100% ;
				display:none ;
	
			}
			.exo-menu > li{
				width:100%;
			}
			.display.exo-menu > li > a{
				display:block ;
				padding: 20px 22px;
			}
	
				.mega-menu, .Images, .Blog,.flyout-right>ul,
				.flyout-left>ul, li.drop-down>ul{
					position:relative;
				}

	}
			a.toggle-menu{
				position: absolute;
				right: 0px;
				padding: 20px;
				font-size: 27px;
				background-color: #ccc;
				color: #23364B;
				top: 0px;
			}
    
/*==============================================
06. BANNERS DE SERVICIO
================================================*/


.mar-top10{margin-top:10px}
.mar-top20{margin-top:20px}
.mar-top30{margin-top:30px}
.mar-top40{margin-top:40px}
.slide{margin:-10px 0 0}
.principal{position:relative;overflow:hidden}
.home-section{width:100%;padding:90px 0 150px}
.section-heading{
	margin-bottom:20px;display:table;width:100%}
.welcome{
	position:absolute;
	width:100%;top:0;
	height:100%;display:table}
.welcome .textwidget{
	display:table-cell;
	vertical-align:middle;
	text-align:center}
.welcome img{
	max-width:90%;margin:0 auto}
.title-section{font-size:55px;
	text-transform:uppercase;
	margin:80px 0 25px}
.text-section{
	font-size:18px;
	font-weight:700}


#spacer1{
	background-image:url("../img/espacio1.jpg");
	background-attachment:fixed;background-position:center}

.space1 h2{margin-bottom:10px;
	font-size:55px;
	border-bottom:1px solid;
	width:auto;display:inline-block;
	padding-bottom:10px}.space2 h2 strong{font-weight:700}.space2 p{font-size:25px;margin:10px 0;font-weight:700}

#spacer2{
	background-image:url("../img/espacio2.jpg");
	background-attachment:fixed;
	background-position:center;
	background-size:cover}

.space2 h2{margin-bottom:10px;
	font-size:55px;border-bottom:1px solid;
	width:auto;display:inline-block;
	padding-bottom:10px}

/*==============================================
07. kbd
================================================*/
.navbar-brand kbd {
  background-color: lightblue;  /* Changes background color*/
  color: #333;                  /* Changes text color*/
}