
/*accordeon*/



#acContainer {
    margin: 0 auto;
        padding-top: 94px;
    width: 100%;
        background-color: #f9f9f9;
}
#accordion input {
  display: none;
}
#accordion label {
  background: #f9f9f9;
  cursor: pointer;
    display: block;
    color: #10447D;
    text-align: center;
    padding: .25em 1em;
    z-index: 20;
    padding-top: 18px;
        border-bottom-style: solid;
    border-bottom-color: rgba(16,68,125,0.1);
    border-bottom-width: 1px;
        padding-bottom: 17px;

}
#accordion label img, #accordion label img:hover  {

display: block;
    margin: auto;
    padding-bottom: 5px;}

    #accordion label img{
        width: 71px;
     -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
    }

    #accordion label img:hover {
       -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
    }


#accordion label:hover {
  background:  #10447D;
  color: #ffffff;
}

#accordion input:checked + label {
  background:  #10447D;
  color: #ffffff;
  margin-bottom: 0;
}
#accordion article {
  background: #ffffff;
  height:0px;
  overflow:hidden;
  z-index:10;
}
#accordion article p {

  padding: 1em;
}
#accordion input:checked article {
}
#accordion input:checked ~ article {
      padding: 20px;
  height: auto;
  margin-bottom: .125em;
}


/*end accordeon*/



h3{ font-size: 18px;
    color:#10447D;
      margin-top: -20px;}

a {
  text-decoration: none;
}

body{overflow: hidden;}


.st-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  
}

.subIcons img{
  display: block;
  position: absolute;
           top: 38%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
     

}

.subIcons p{ 
  line-height: 15px;
  font-size: 13px;
    display: block;
  position: absolute;
           top: 77%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding-left: 23px;
    padding-right: 23px;

}


.st-container > input,
.st-container > a {
     position: fixed;
    top: 111px;
    width: 15%;
    cursor: pointer;
    font-size: 16px;
  height: 174px;
  line-height: 34px;
}

.st-container > input {
  opacity: 0;
  z-index: 999;
          height: 174px;}


.st-container > a {
  z-index: 2;
  font-weight: 700;
  background: #e5e5e5;
     color: #000000;
  text-align: center;
       height: 174px;
}


 @media screen and (max-width: 1024px){ 

  .st-container > a {
    height: 115px;}

    .st-container > input {
    height: 18%;}

  .subIcons p{
      display: none;
  }

.subIcons img {    width: 70%;
  
          top: 50%;}}

   @media screen and (min-width: 768px) {
    .accordion-container{display: none;}}

    @media screen and (max-width: 768px) {
      body{overflow: auto;}
      .container{display: none;}
       h1, h3, #accordion article p {    
        padding-left: 27px;
           padding-right: 20px;}
           h3{    padding-top: 36px;}

}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .heading{height: 141px;}
    .subIcons img {
    width: 76%;
      left: 47%;}
       h1, h3, #accordion article p {    
        padding-left: 27px;
           padding-right: 20px;}
           h3{    padding-top: 36px;}
  }


 @media screen and (max-height: 930px){ 

.st-panel{overflow-y: auto;


}
}



/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */


#st-control-1, #st-control-1 + a {
  left: -0.5%;
}

#st-control-2, #st-control-2 + a {
  left: 14.5%;
}

#st-control-3, #st-control-3 + a {
  left: 29.5%;
}

#st-control-4, #st-control-4 + a {
  left: 43.5%;
}

#st-control-5, #st-control-5 + a {
  left: 57.5%;
}

#st-control-6, #st-control-6 + a {
  left: 71.5%;
}

#st-control-7, #st-control-7 + a {
  left: 85.5%;
}



.st-container > input:checked + a,
.st-container > input:checked:hover + a{
  background: #f9f9f9;
}

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
  bottom: 100%;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #ffffff;
  border-width: 20px;
  left: 50%;
  margin-left: -20px;
}

.st-container > input:hover + a{
  background: #f9f9f9;
}

.st-container > input:hover + a:after {
  border-bottom-color: #f9f9f9;
}

.st-scroll,
.st-panel {
  position: relative;
  width: 100%;
         padding-top: 147px;
  height: 100%;

}

.st-panel li{
 padding-left: 75px;
 font-size: 14px;
     padding-right: 30px;
     padding-top: 5px;
}



.st-scroll {
  top: 0;
  left: 0;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  
  /* Let's enforce some hardware acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

.st-panel{
  background: #fff;
  
} 

#st-control-1:checked ~ .st-scroll {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -o-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
  -webkit-transform: translateY(-200%);
  -moz-transform: translateY(-200%);
  -o-transform: translateY(-200%);
  -ms-transform: translateY(-200%);
  transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
  -webkit-transform: translateY(-300%);
  -moz-transform: translateY(-300%);
  -o-transform: translateY(-300%);
  -ms-transform: translateY(-300%);
  transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
  -webkit-transform: translateY(-400%);
  -moz-transform: translateY(-400%);
  -o-transform: translateY(-400%);
  -ms-transform: translateY(-400%);
  transform: translateY(-400%);
}

#st-control-6:checked ~ .st-scroll {
  -webkit-transform: translateY(-500%);
  -moz-transform: translateY(-500%);
  -o-transform: translateY(-500%);
  -ms-transform: translateY(-500%);
  transform: translateY(-500%);
}
#st-control-7:checked ~ .st-scroll {
  -webkit-transform: translateY(-600%);
  -moz-transform: translateY(-600%);
  -o-transform: translateY(-600%);
  -ms-transform: translateY(-600%);
  transform: translateY(-600%);
}

/* Content elements */


.st-panel h1 {

 font-family: 'Raleway', sans-serif;
  text-align: left;
      padding-left: 75px;
  -webkit-backface-visibility: hidden;
    padding-right: 50px;
}

.st-panel h3 {

 font-family: 'Raleway', sans-serif;
  text-align: left;
      padding-left: 75px;
      padding-right: 50px;
  -webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h1, h3,
#st-control-2:checked ~ .st-scroll #st-panel-2 h1, h3,
#st-control-3:checked ~ .st-scroll #st-panel-3 h1, h3,
#st-control-4:checked ~ .st-scroll #st-panel-4 h1, h3,
#st-control-5:checked ~ .st-scroll #st-panel-5 h1, h3,
#st-control-6:checked ~ .st-scroll #st-panel-6 h1, h3,
#st-control-7:checked ~ .st-scroll #st-panel-7 h1, h3,{
  -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
  -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
  -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
  -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
  animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
  0% { 
    -webkit-transform: translateY(-40px); 
    opacity: 0;
  }
  100% { 
    -webkit-transform: translateY(0px);  
    opacity: 1;
  }
}

@-moz-keyframes moveDown{
  0% { 
    -moz-transform: translateY(-40px); 
    opacity: 0;
  }
  100% { 
    -moz-transform: translateY(0px);  
    opacity: 1;
  }
}

@-o-keyframes moveDown{
  0% { 
    -o-transform: translateY(-40px); 
    opacity: 0;
  }
  100% { 
    -o-transform: translateY(0px);  
    opacity: 1;
  }
}

@-ms-keyframes moveDown{
  0% { 
    -ms-transform: translateY(-40px); 
    opacity: 0;
  }
  100% { 
    -ms-transform: translateY(0px);  
    opacity: 1;
  }
}

@keyframes moveDown{
  0% { 
    transform: translateY(-40px); 
    opacity: 0;
  }
  100% { 
    transform: translateY(0px);  
    opacity: 1;
  }
}

.st-panel p {
  text-align: left;
      font-size: 14px;
  z-index: 2;
  padding-top: 20px;
         padding-left: 75px;
         padding-right: 16px;
  -webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p,
#st-control-6:checked ~ .st-scroll #st-panel-6 p,
#st-control-7:checked ~ .st-scroll #st-panel-7 p,{
  -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
  -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
  -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
  -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
  animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveUp{
  0% { 
    -webkit-transform: translateY(40px); 
    opacity: 0;
  }
  100% { 
    -webkit-transform: translateY(0px);  
    opacity: 1;
  }
}

@-moz-keyframes moveUp{
  0% { 
    -moz-transform: translateY(40px); 
    opacity: 0;
  }
  100% { 
    -moz-transform: translateY(0px);  
    opacity: 1;
  }
}

@-o-keyframes moveUp{
  0% { 
    -o-transform: translateY(40px); 
    opacity: 0;
  }
  100% { 
    -o-transform: translateY(0px);  
    opacity: 1;
  }
}

@-ms-keyframes moveUp{
  0% { 
    -ms-transform: translateY(40px); 
    opacity: 0;
  }
  100% { 
    -ms-transform: translateY(0px);  
    opacity: 1;
  }
}

@keyframes moveUp{
  0% { 
    transform: translateY(40px); 
    opacity: 0;
  }
  100% { 
    transform: translateY(0px);  
    opacity: 1;
  }
}

/* Colored sections */

.st-color h2 {
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 
.st-color p {
  color: #fff;
  color: rgba(255,255,255,0.8);
}

@media screen and (max-width: 1024px) {
  .st-container > input, .st-container > a {
    top: 146px;}
}

#contenedor {
    
    width: 100%;  /* Ancho del contenedor */
box-sizing: border-box;
        
-moz-box-sizing: border-box;
}

#contenedor input {
    height: 0px;
visibility: hidden;
    height: 36px;
}

#contenedor label {
    float: left;
    cursor: pointer;
    font-size: 12px;
    line-height: 40px;
        height: 36px;
    padding: 0 13px;
    display: block;
    color: #000000;
    text-align: center;
    margin-right: 5px;
    border-right-color: #e5e5e5;
    border-right-style: solid;
    border-right-width: 1px;
}

#contenedor input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#contenedor input:checked + label {
  color: #10447d;
z-index: 6;
      line-height: 40px;
        height: 36px;
    position: relative;
    top: 0px;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}

.content {
background: #ffffff;  /* Fondo del contenido */
position: relative;
width: 100%;
height: 100%; /* Alto del contenido */
}

.content div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}

#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4,
#contenedor input.tab-selector-5:checked ~ .content .content-5  {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
}

.contenedorWrapp h1{
   padding-top: 20px;
}



