.map-responsive{
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.divHr {
    display: block;
       position: relative;
       padding: 0;
       margin: 8px auto;
       height: 0;
       width: 85%;
       max-height: 0;
       font-size: 1px;
       line-height: 0;
       clear: both;
       border: none; 
       border-top: 1px solid #c8c8c8;
       border-bottom: 1px solid #46d01d;
}






.sticky-container{
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:68%;
    width:210px;
    z-index: 1100;
}
.sticky li{
    list-style-type:none;
    background-color:#;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky li:hover{
    margin-left:-115px;
}
.sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}



      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
      }



.parallax1 { 
    background-image: url("img/PARLX-1.jpg"); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; 
}





/** Background tipo paralaxx * --------------------------------------------------*/


.section .background-image {
  z-index: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.section .background-image.background-image-fixed {
  background-attachment: fixed;
}




/** Nav y Background image al principio * --------------------------------------------------*/


html,
body,
header,
.view {
  height: 100%;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .view {
    height: 1000px;
  }
}
@media (min-width: 800px) and (max-width: 850px) {
  html,
  body,
  header,
  .view {
    height: 600px;
  }
}

.btn .fa {
  margin-left: 3px;
}

.top-nav-collapse {
  background-color: #334655 !important;
}



@media (max-width: 991px) {
  .navbar:not(.top-nav-collapse) {
    background: #334655 !important;
  }
}

.btn-white {
  color: black !important;
}

h6 {
  line-height: 1.7;
}

.rgba-gradient {
  background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.7)), to(rgba(29, 210, 177, 0.7)));
  background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: linear-gradient(to 45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
}














/** Carousel * --------------------------------------------------*/

 /* Carousel*/
    .carousel,
    .carousel-item,
    .carousel-item.active {
      height: 100%;
    }
    .carousel-inner {
      height: 100%;
    }
    .carousel-item:nth-child(1) {
      background-image: url("http://www.promographic.com.mx/img/sm-bann-img-1.jpg"); 
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .carousel-item:nth-child(2) {
      background-image: url("http://www.promographic.com.mx/img/sm-bann-img-2.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .carousel-item:nth-child(3) {
      background-image: url("http://www.promographic.com.mx/img/sm-bann-img-3.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }





/** Video * --------------------------------------------------*/
          .video-fluid {
            width: 100%;
            height: auto;
          }



/*Flecha para hacer la pagina hacia arriba*/
.ir-arriba{
  display:none;
  background-repeat:no-repeat;
  font-size:20px;
  color:black;
  cursor:pointer;
  position:fixed;
  bottom:10px;
  right:10px;
  z-index:2;
}








/*Tamaño texto del contador de tiempo*/
#time-counter {
    font-size: 3rem;
}



  


/*TABLA Primera columna fija*/

.table-scroll {
  position: relative;
  width:100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 100%;
}
.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrap {
  position: relative;
}
.table-scroll th {
  padding: 5px 10px;
  background: #fff;
  vertical-align: middle;
}
.table-scroll td {
  padding: 5px 10px;
  border-bottom: 0.5px solid #c2c2c2; 
  background: #fff;
  vertical-align: middle;
}
/*.table-scroll thead th {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}*/



th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}


th:nth-child(0n+2) {
  position: -webkit-sticky;
  position: sticky;
    left: 140px;
}


/*thead th:first-child,
tfoot th:first-child {
  z-index: 5;
}

thead th:nth-child(0n+2) {
  position: -webkit-sticky;
  position: sticky;
    left: 140px;
	z-index: 5;
}*/













/*PARPADEO EFECTO*/

.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 2.0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 2.0s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
 
@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
} 

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}
 
@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}




/*BOTON CARRITO*/
.btn-carrito {
    background-color: #fa7167; 
    color: #fff; 
    text-align: center; 
    width: 50px;
    height: 50px; 
    padding: 10px 16px; 
    font-size: 13px; 
    line-height: 1.33; 
    border-radius: 25px; 
    border-style: solid; 
    border-width: 2px; 
    border-color: #fff;
}    




/*TIPOGRAFIA LATO*/
body {
  font-family: 'Lato', sans-serif !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
    
}






 



/*ACORDION SERVICIOS*/

.container .cardd {
  flex: 1;
  transition: all 1s ease-in-out;
  height: 75vmin;
  position: relative;
}
.container .cardd .cardd__head {
  color: #fff;
  background: rgba(21, 118, 190, 0.62);
  padding: 0.3em;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
  transition: all 0.5s ease-in-out;
  min-width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}
.container .cardd:hover {
  flex-grow: 10;
}
.container .cardd:hover img {
  filter: grayscale(0);
}
.container .cardd:hover .cardd__head {
  text-align: center;
  top: calc(100% - 2em);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  font-size: 1.2em;
  transform: rotate(0deg) skew(-5deg);
}
.container .cardd img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out;
  filter: grayscale(100%);
}
.container .cardd:not(:nth-child(5)) {
  margin-right: 1em;
}


/********* OVERLAY IMAGES *******/
/* Main container */
.overlay-image {
 position: relative;
 width: 100%;
}
/* Original image */
.overlay-image .image {
 display: block;
 width: 100%;
 height: auto;
}
/* Original text overlay */
.overlay-image .text {
 color: #fff;
 font-size: 20px;
 line-height: 1.5em;
 display: flex;	
 text-align: center;	
 justify-content: center;
 align-items: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.66);	
	
}

/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;	
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
 opacity: 1;
}


/********* Background and text only overlay on hover *******/
.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(0,0,0,0.5);
}





 


 

/********* Contador tiempo Redondo *******/

.base-timer {
  position: relative;
  width: 200px;
  height: 200px;
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
color: #fff;    
}












/********* Contador tiempo Redondo 2 *******/

countdown-timer {
  font-family: sans-serif;
  display: block;;
  position: relative;
  width: 200px;
  height: 200px;
}

countdown-timer svg {
  transform: scaleX(-1);
}

countdown-timer g.timer-circle {
  fill: none;
  stroke: none;
}

countdown-timer .path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

countdown-timer .path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

countdown-timer .path-remaining.green {
  color: rgb(65, 184, 131);
}

countdown-timer .path-remaining.orange {
  color: orange;
}

countdown-timer .path-remaining.red {
  color: red;
}

countdown-timer span.label {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
    color: #fff;
}








/********* OVERLAY IMAGES *******/
/* Main container */
.overlay-imageA {
 position: relative;
 width: 100%;
}


/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-imageA .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .5s ease;	
}
/* New overlay appearance on hover */
.overlay-imageA:hover .hover {
 opacity: 1;
}


/********* Background and text only overlay on hover *******/
.overlay-imageA .normal {
 transition: .5s ease;
}
.overlay-imageA:hover .normal {
 opacity: 0;
}