#bodyPagina {
    margin: 0 auto;
    height: 100%;
    text-align: center;
    background-color: rgb(255, 255, 255);
}

header{
    width: 100%;
    /*background: #f1b232;*/
    /*background-image: url("../imagenes/banner12.png");*/
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 2px 2px 2px rgba(49, 49, 49, 0.48);
}

.divLogo{
    /*width: 1200px;*/
    margin: auto;
    height: 110px;
}

.logo{
    width: 30%;
    height: 221px;
    float: left;
    position: relative;
    top: -23px;
    text-align: center;
}

.imgLogo{
    height: 200px;
    background: #fff;
    border-radius: 4px;
    /* border: solid 1px rgba(0, 0, 0, 0.5); */
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
}

nav{
    width: 70%;
    float: left;
    text-align: right;
    padding-top: 50px;
    box-sizing: border-box;
    margin-top: 0px;
}

nav ul{
    margin-right: 15px;
}

nav ul li{
    display: inline;
}

nav ul li a{
    color: #575656;
    font-size: 28px;
    text-decoration: none;
    text-transform: uppercase;
    padding-left: 15px;
    /*font-weight: bold;*/
    letter-spacing: 1px;
    font-family: TitilliumWeb;
}

nav ul li a:hover{
    color: #f1b232;
}

@font-face{
    font-family: TitilliumWeb;
    src: url(../fuentes/TitilliumWeb-Regular.ttf);
}

.divFondo{
    position: absolute;
    top: 0px;
    width: 100%;
    opacity: 0.23;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    background-image: url();
}

/* INICIO ESTILOS PARA EL SLIDE DE LAS IMAGENES*/
.bannerPrincipal{
    margin: auto;
    width: 100%;
    z-index: -1;
    position: relative;
    top: -111px;
    box-shadow: 2px 2px 2px rgba(49, 49, 49, 0.48);
}

.mySlides {
    display:none;
}

.fade{
 -webkit-animation-name:fade;
 -webkit-animation-duration:1.5s;
 animation-name:fade;
 animation-duration:1.5s;
}

@-webkit-keyframes fade{
 from{opacity:.4}
 to{opacity:1}
}

@keyframes fade{
 from{opacity:.4}
 to{opacity:1}
}

/*Los estilos para el texto*/
.text{
    color: #f2f2f2;
    font-size: 59px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    text-align: left;
    font-family: TitilliumWeb;
    font-weight: bold;
}
/* FIN ESTILOS PARA EL SLIDE DE LAS IMAGENES*/

.divColInfo {
    width: 350px;
    height: 300px;
    background-color: green;
    /* float: left; */
    margin: auto;
    display: inline-block;
    background: #fff;
    padding: 16px;
    border: 1px solid #cdcdcd;
    margin: 11px;
    /* width: 22%; */
    /* max-height: 188px; */
    /* padding: 10px; */
    border-radius: 5px;
    overflow: hidden;
    padding-top: 24px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.30);
    cursor:pointer;
}

.contenedorInfo{
    /*background-color: red;*/
    position: relative;
    
}

.texto1{
    font-size: 60px;
    font-family: TitilliumWeb;
    width: 100%;
    margin: auto;
    color: #404040;
}

.texto2{
    font-family: TitilliumWeb;
    font-size: 24px;
}

.imgMini{
    border-radius: 5px;
    margin-top: 15px;
}

.divFooter{
    background: #000000;
    padding: 15px;
    font-size: 14px;
}

.textoFooter{
    color: #FFF;
    font-family: TitilliumWeb;
}

.barraSuperior{
    width: 100%;
    background: #000;
    margin: 0px auto;
    text-align: right;
    padding: 7px 0px;
}


.textoContacto1{
    font-size: 18px;
    color: #ffdc5d;
    font-family: TitilliumWeb;
    padding-right: 20px;
    vertical-align: middle;
}
/*INICIO ESTILOS SLIDE CLIENTES*/

.divImgCliente{
    display: inline;
    margin: 0px 15px 0px 15px;
}

/*FIN SLIDE CLIENTES*/

/*ESTILOS TITULOS PAGINAS SECUNDARIAS*/

.tituloServicio1{
    margin-top: 111px;
    text-align: left;
    /*margin-left: 30px;
    margin-right: 30px;*/
    
}

hr{
    height: 6px;
    background: #f1b232;
    /*width: 500px;
    position: absolute;*/
    border-radius: 10px;
}

.sectionServicio{
    margin: 0 100px;
    height: 600px;
}

.submenu{
    display:inline-block;
    text-align: left;
    width: 350px;
    font-family: TitilliumWeb;
    float: left;
    font-size: 14px;
}

.submenu a{
    display: block;
    padding: 12px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select:none;
}

.submenu a:hover {
  background-color: #404040;
  color: #ffffff;
}

.submenu a:active{
   background-color: #DDDDDD;
  color: #4F4F4F;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.50);
}


/*ESTILOS SLIDER PAGINA SERVICIOS*/

//variables
$slider-height: 500px;
$text-block-width: 400px;

$dark-font-color: #212121;
$accent-font-color: #CA9CE1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;

//transitions and mixins

//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

/*common styles !!!YOU DON'T NEED THEM */
body {
  font: {
      family: 'Poppins', sans-serif;
      weight: 400;
      size: 17px;
    }
  color: $dark-font-color;
  line-height: 1.4;
}

.container {
  width: 1100px;
  margin: 50px auto 0;
  
  h1 {
    font: {
      size: 25px;
    }
    text-align: center;
    
    span {
      position: relative;
      font: {
        family: 'Merienda', cursive;
      }
      color: $accent-font-color;
      
      &:after {
        @include position-absolute($bottom: -10px, $left: 0);
        content: "~";
        
        width: 100%;
        text-align:  center;
      }
    }
  }
  
  .subheader {
    text-align: center;
    margin-top: 15px;
  }
}

  .link {
    display: flex;
    justify-content: center;
    width: 800px;
    margin: 30px auto 0;
    
    a {
      @include transition-mix;
      
      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin-right: 40px;
      color: inherit;
      font: {
        size: inherit;
      }
      text-decoration: none;
      
      &:hover {
        color: $accent-font-color;
      }
      
      &:last-child {
        margin-right: 0;
      }

      i {
        color: $accent-font-color;
        margin-right: 9px;
        font-size: 30px;
      }
    }
  }

.slider-containers {
  width: 100%;
  margin-top: 60px;
}

.slider-container {
  margin-bottom: 60px;
  
  h2 {
    text-align: center;
  }
}

.flexbox-slider {
  margin-top: 50px;
}

/*slide styles !!!YOU NEED THEM */
.flexbox-slider {
  display: flex;
  width: 100%;
  height: $slider-height;
  visibility: hidden;
  
  .flexbox-slide {
    @include transition-mix($duration: .3s);
    
    width: 20%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    visibility: visible;
    
    //overlay
    &:after {
      @include position-absolute($top: 0, $left: 0);
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
      z-index: 2;
      
      opacity: 0;
    }
    
    img {
      @include position-absolute($top: 50%, $left: 50%);
      height: auto;
      width: auto;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    
    .text-block {
      @include position-absolute($bottom: 30px, $left: 30px);
      max-width: $text-block-width;
      padding: 20px;
      border-radius: 5px;
      background-color: rgba($text-overlay-color, $text-overlay-opacity);
      color: $light-font-color;
      
      z-index: 4;
      
      visibility: hidden;
      opacity: 0;
      
      h3 {
        font: {
          size: 20px;
          weight: 700;
        }
      }
    }
  }
  
    &:hover {
    
    .flexbox-slide:hover {
      flex-shrink: 0;
      width: 80%;
    }
  }
}

/* effect 1 styles */
.flexbox-slider.flexbox-slider-1 {
  
  .flexbox-slide {
    
    .text-block {
      bottom: 60px;
    }
  }
  
  &:hover {
    
    .flexbox-slide:hover {
      
      .text-block {
        @include transition-mix($delay: .5s);
        bottom: 30px;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

/* effect 2 styles */
.flexbox-slider.flexbox-slider-2 {
  
  .flexbox-slide {
    
    .text-block {
        left: -60px;
      }
  }
  
  &:hover {
    
    .flexbox-slide:not(:hover) {
      
      
      &:after {
        @include transition-mix;
        opacity: 1;
      }
    }
    
    .flexbox-slide:hover {
      
      .text-block {
        @include transition-mix($delay: .5s, $timing: cubic-bezier(0, 0, 0, 1.82), $duration: .3s);
        left: 30px;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

/* effect 3 styles */
.flexbox-slider.flexbox-slider-3 {
  
  .flexbox-slide {
    
    &:after {
      transform: scale(.5);
      transform-origin: center center;
    }
    
    .text-block {
      transform: rotate(-20deg);
    }
  }
  
  &:hover {
    
    .flexbox-slide:hover {
      
      &:after {
        @include transition-mix($delay: .4s);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
      }
      
      .text-block {
        @include transition-mix($delay: .6s);
        transform: rotate(0deg);
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

/* effect 4 styles */
.flexbox-slider.flexbox-slider-4 {
  
  .flexbox-slide {
    
    &:after {
      top: -100%;
    }
    
    .text-block {
      transform: scale(1.2);
    }
  }
  
  &:hover {
    
    .flexbox-slide:not(:hover) {
      
      &:after {
        @include transition-mix;
        top: 0;
        opacity: 1;
        visibility: visible;
      }
    }
    
    .flexbox-slide:hover {
      
      .text-block {
        @include transition-mix($delay: .5s);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

/* effect 5 styles */
.flexbox-slider.flexbox-slider-5 {
  
  .flexbox-slide {
    
    .text-block {
      transform: scale(.85);
    }
  }
  
  &:hover {
    
    .flexbox-slide:hover {
      
      .text-block {
        @include transition-mix($delay: .7s);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
      }
      
      &:after {
        @include transition-mix($delay: .4s);
        opacity: 1;
        visibility: visible;
      }
    }
  }
}