html, body{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f0f2f5;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }


body {
    margin: 0px;
    padding: 0px;
  }
#limite{
  display: flex;
  flex-direction:column;
  min-height: 100%;
  position:  relative;
}
.blog {
    display: flex;
    flex-direction: column;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
    margin-top: 5rem;
    margin-bottom:  5em;
}

#limite > div.contenido > div > h2 > span{
  margin: 1% 0 0 0;
  z-index: 99;
  position: absolute;
  font-size: 6vw;
  width:  30vw;
}


/* gallery*/ 

div.sigplus-gallery{
  border-style: solid;
  border-width: 1px 0px 1px 0px;
  border-color: #33404d;
  padding-top: 4%;
  padding-bottom: 4%;
  margin-top: 0%;
}
/* end gallery*/ 

div.blog div.category-desc.clearfix{
  width: 100%;
}

div.items-row div.span6 div div.page-header h2{
padding: 0px;
margin: 0px;
position: relative;
}

/* blog layout*/ 

/* category description*/ 

div.blog div.category-desc p,div.blogaudio div.category-desc p {
    width: 30%;
    text-align: right;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    font-size: 1.3rem;
    line-height:  1.8rem;
  }

/* end description*/ 

 .span6 {
    width: 30%;
    flex-grow: 1;
}


.items-row.cols-2 {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding-left: 5%;
}
div.span6 div.item ul {
    display: flex;
    flex-direction: row;
    }
 
 /* audio iframes*/ 

div.contenido > div.blog > div > div > p > iframe{
  width: 100% !important;
}
#container > h3 > a{
  font-family : 'BebasNeue';
}
 

    /* footer*/ 
  
  .footer{
  background-color: rgba(102, 128, 153, 0.7);
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-flow: row;
  /* margin-top: 5%; */
  position:  absolute;
  bottom: 0px;
  width:  100%;
  }

div.footer div.custom p{
  margin-top: 1%;
  margin-bottom:1%;
  }
.custom{
  width: 50%;
  margin-right:auto;
  margin-left: auto;

}
.custom ul {
    display: flex;
    flex-direction: row;
    margin: 1vw 0 1vw 0;
}

.custom ul li {
    color: #33404d;
    flex-grow: 1;
    text-align: center;
}
.custom ul li a{
    color: #33404d;
}



  /*-------------------------------------------------------------------*/


/* responsive development*/ 

 
 /* big screens*/ 
@media screen and (min-width: 1367px){
  

}

/* tablets landscape*/ 

@media screen and (min-width:768px) and (max-width: 1366px) and (orientation: landscape){
  
  #superior > div > ul{
    padding:0px;
  }
  #superior > div > ul > li{
    padding:0px;
    flex-grow:1;
    text-align:  center;
  }
  #superior > div > ul > li.item-101.default > a{
    font-size:1.5vw;
  }
  div.contenido > div.blog > h2, #contenido > div > h2,#limite > div.contenido > div > h2 > span{
    font-size: 8vw;
  }
  #sigplus_1001{
    width: 80vw;
    margin-left: auto;
    margin-right:  auto;
  }
 
  div.contenido > div.blog > div.category-desc.clearfix > p{
    width: 45vw;
    font-size: 1.5vw;
  }
  div.contenido > div.blog > div.items-row{
    width: 70vw;
    padding:  0px;
    margin-left:  auto;
    margin-right:  auto;
  }
  div.contenido > div.blog > div.items-row.cols-2 > div.span6 > div > ul{
    flex-direction:  column;
  }
  div.contenido > div.blog > div.items-row.cols-2 > div.span6 > div > ul > li:nth-child(2){
    width:100%;
    margin:  0px;
    padding:  0px;
  }
  /* blogaudio*/ 
  #limite > div.contenido > div.blogaudio{
  width: 65vw !important;
  margin-top: 11% !important;
  margin-bottom:10% !important;
  }
  div.blog div.category-desc p,div.blogaudio div.category-desc p{
    width:40vw;
    font-size:1.2rem
  }
}

@media screen and (min-width:768px) and (max-width: 1366px) and (orientation: landscape){

    #limite > div.contenido > div > h2{
      margin:0px;
    }
    #limite > div.contenido > div > div.items-leading.clearfix{
      width:70vw;
    }
    div.contenido > div.blog > div > div > p.derecha{
   width:30vw;
   float:right;
 }
 div.contenido > div.blog > div > div > p.izquierda{
   width:30vw;
   float:left;
 }
 div.contenido > div.blog > div > div > p.derecha img{
   width:100%;
   height:100%;
 }
 #limite > div.contenido > div > div.items-leading.clearfix > div > p{
  font-size:3vw;
 }
  #limite > div.contenido > div{
    width:80vw;
    margin-top:  8%;
  }
}






 /* tablets portrait*/ 

@media screen and (min-width:659px) and (max-width: 1366px) and (orientation:portrait){
  
  #superior > div > ul{
    padding:0px;
  }
  div.items-row > div> div > ul{
    flex-direction:column !important;
  }
  #superior > div > ul > li{
    padding:0px;
    flex-grow:1;
    text-align:  center;
  }
  div.contenido > div.blog > h2{
    font-size: 9vw;
  }
  div.contenido > div.blog > div.category-desc.clearfix > p{
    width: 45vw;
    font-size:  2.3vw;
  }
  div.contenido > div.blog > div.items-row{
    width: 80vw;
    padding:  0px;
    margin-left:  auto;
    margin-right:  auto;
  }
  div.contenidoe > div.blog > div.items-row.cols-2 > div.span6 > div > ul{
    flex-direction:  column;
  }
  div.contenido > div.blog > div.items-row.cols-2 > div.span6 > div > ul > li:nth-child(2){
    width:100%;
    margin:  0px;
    padding:  0px;
  }
  /* blogaudio*/ 
  #limite > div.contenido > div.blogaudio{
  width: 75vw !important;
  margin-top: 12% !important;
  margin-bottom: 10% !important;
  }
  div.blog div.category-desc p,div.blogaudio div.category-desc p{
    width:55vw;
    font-size:1.2rem
  }
  
}

@media screen and (min-width:659px) and (max-width: 1366px) and (orientation:portrait){
    #limite > div.contenido > div > h2{
      margin:0px;
    }
    #limite > div.contenido > div > div.items-leading.clearfix{
      width:70vw;
    }
    div.contenido > div.blog > div > div > p.derecha{
   width:30vw;
   float:right;
 }
 div.contenido > div.blog > div > div > p.izquierda{
   width:30vw;
   float:left;
 }
 div.contenido > div.blog > div > div > p.derecha img{
   width:100%;
   height:100%;
 }
 #limite > div.contenido > div > div.items-leading.clearfix > div > p{
  font-size:3vw;
 }
  #limite > div.contenido > div{
    width:80vw;
    margin-top:  8%;
  }
}







 /*mobile phones portrait*/


@media screen and (max-width: 658px)and (orientation:portrait){
  #superior div{
    /* width:100%; */
  }
  #superior > div > ul{
    padding:0px;
  }
  #superior > div > ul > li{
    padding:0px;
    flex-grow:1;
    text-align:  center;
  }
  #superior > div > ul > li > a{
    font-size: 3.3vw;
  }
  
  div.contenido > div.blog > div.category-desc.clearfix > p{
    width: 55vw;
    font-size: 1.2rem;
    line-height: 1.8rem;
  }
 div.contenido > div.blog > div.items-row.cols-2{
   display:flex;
   flex-direction:column;
   width: 100%;
   padding:  0px;
 }
 div.blog > div.items-row.cols-2 > div.span6{
   width:100%
 }

 div.contenido > div.blog > h2 > span.subheading-category{
   margin-top: 6vw !important;
   font-size: 12vw !important;
 }
 div.blog > div.items-row.cols-2 > div.span6 > div > div.page-header > h2{
   font-size: 1vw;
 }
 div.blog > div.items-row.cols-2 > div.span6 > div > ul{
   display:flex;
   flex-direction:column;
   padding:  0px;
 }
 div.contenido > div.blog > div.items-row > div.span6 > div > ul > li:nth-child(1){
   align-self:  center;
 }
 div.contenido > div.blog > div.items-row > div.span6 > div > ul > li:nth-child(2){
   width:100%;
   font-size: 1.6rem;
   padding-top:  2vh;
   line-height: 3.4rem;
 }
 div.contenido > div.footer > div{
   width:  80vw;
 }
 #limite > div.contenido > div > div.clearfix > div > div > div > h2 > a{
    font-size: 7vw;
  }
 /* blogaudio*/ 
  #limite > div.contenido > div.blogaudio{
  width: 90vw !important;
  margin-top: 15% !important;
  margin-bottom: 20% !important;
  }
  #limite > div.contenido > div > div.clearfix > div > div > p{
  line-height:3.5rem;
  font-size:1.6rem;
  }
  #limite > div.contenido > div.blogaudio > h2 > span{
    display:flex;
    position:  relative;
    font-size:  12vw;
  }
  #limite > div.contenido > div > div.clearfix > div > div > div > h2{
    font-size:8vw;
    margin-top: 40px;
    margin-bottom: 10px;
  }
                    /*vertical menu_burger*/
                 
  #superior > div > div > div.menu-icon3{
	width: 1.2vw !important;
	height: 0.7rem!important;
	margin-left: 2rem !important;
	}
  #off-menu_92 > div.menu-icon-cont.sm-btn-92.sm-close > div.menu-icon3{
	width: 1.8vw!important;
	height: 0vw!important;
	}
  .sm-btn-92  {
  background: url("/images/constructing_images/bars.png")!important;
  background-repeat:no-repeat!important;
  background-size: contain !important;
  }
  .sm-close {
  background: url("/images/constructing_images/bars2.png")!important;
  background-size: contain !important;
	background-position: center !important;
  }
   /* vertical menu*/ 
  #superior{
    width:100%;
  }
  .sm-parent{
  right: 0px !important;
  margin-left:  auto;
  margin-right:  0px;
  width: 38px !important;
  }
  .sm-btn-92:before {
    line-height: 3.5rem !important;
  }
  .sm-btn-92:before{
        font-size: 2.8rem !important;
  }
  #superior > div > div.sm-popup-burger{
    padding-left:20px;
  }
  .sm-btn-92{
   padding-right:10px; 
  }
  h3.sm-head{
    height:38px !important;
  }
  .sm-close{
    height: 38px !important;
  }
  body > div > div > div > div.menu-icon-cont.sm-btn-92.sm-close{
    width:3.5rem;
  }
  #off-menu_92 > h3 > span.sm-title {
    line-height: 4rem!important;
  }
}

@media screen and (max-width: 658px)and (orientation:portrait){
  div.blog {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5em;
    margin-top: 5vw;
}
  div.contenido > div.blog > div.items-leading.clearfix {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
 div.blog > div > div > p{
   line-height:  7vw;
 }
 div.contenido > div.blog > div > div > p.derecha{
   width:40vw;
   float:right;
 }
 div.contenido > div.blog > div > div > p.izquierda{
   width:40vw;
   float:left;
 }
 div.contenido > div.blog > div > div > p.derecha img{
   width:100%;
   height:100%;
 }
 div.blog div.category-desc p,div.blogaudio div.category-desc p{
    width: 80vw;
    font-size: 1.4rem;
    line-height: 2rem;
  }
}








  /*mobile phones landscape*/

@media screen and (max-width: 750px) and (orientation: landscape){ 
  
   #superior > div > ul{
    margin: 0px !important;
  }
  #superior > div > ul > li{
    padding:0px;
    flex-grow:1;
    text-align:  center;
  }
  #superior > div > ul > li > a{
    font-size: 2.5vw;
  }
  
  div.contenido > div.blog > div.category-desc.clearfix > p{
    width: 45vw;
    font-size:  2.3vw;
  }
 div.contenido > div.blog > div.items-row.cols-2{
   display:flex;
   flex-direction:column;
   width: 100%;
   padding:  0px;
 }
 div.blog > div.items-row.cols-2 > div.span6{
   width:100%
 }
 div.blog > div.items-row.cols-2 > div.span6 > div > div.page-header > h2{
   font-size: 1vw;
   padding-top:  2vh;
 }
 div.blog > div.items-row.cols-2 > div.span6 > div > ul{
   display:flex;
   flex-direction:column;
   padding:  0px;
 }
 div.contenido > div.blog > div.items-row > div.span6 > div > ul > li:nth-child(1){
   align-self:  center;
 }
 div.contenido > div.blog > div.items-row > div.span6 > div > ul > li:nth-child(2){
   width:100%;
   font-size: 3vw;
   padding-top:  2vh;
 }
 div.contenido > div.footer > div{
   width:  80vw;
 }
 #limite > div.contenido > div > h2 > span{
    font-size:10vw;
  }
  #limite > div.contenido > div > div.clearfix > div > div > div > h2 > a{
    font-size:5vw;
  }
  #limite > div.contenido > div > div.clearfix > div > div > p{
  line-height:3.5rem;
  font-size:1.6rem;
  }
  #limite > div.contenido > div > div.clearfix > div > div > div > h2{
    font-size:3rem;
  }
  
  /* vertical menu*/ 
  #superior{
    width:100%;
  }
  .sm-parent{
  right: 0px !important;
  margin-left:  auto;
  margin-right:  0px;
  width: 35px !important;
  }
  .sm-btn-92:before {
    line-height: 4rem !important;
  }
  .sm-btn-92:before{
        font-size: 2.8rem !important;
  }
  #superior > div > div.sm-popup-burger{
    padding-left:20px;
  }
  h3.sm-head{
    height:44px !important;
  }
  #superior > div > div > div.menu-icon3 {
    width: 1rem!important;
    height: 1rem!important;
  }
  .sm-btn-92:before {
    padding-right:.3rem;
    padding-top:0px!important;
    padding-bottom: 44px!important;
  }
  body > div > div > div > div.menu-icon-cont.sm-btn-92.sm-close{
    width:3.5rem;
  }
  .sm-close {
    height: 44px !important;
  }
  .sm-btn-92 {
    padding-right: 10px;
  }
  h3.sm-head{
    height: 44px !important;
  }
  #off-menu_92 > h3 > span.sm-title {
    line-height: 4rem!important;
  }
}

@media screen and (max-width: 750px) and (orientation: landscape){
  div.contenido > div.blog > div > div > p.derecha{
   width:40vw;
   float:right;
 }
 div.contenido > div.blog > div > div > p.izquierda{
   width:40vw;
   float:left;
 }
 div.contenido > div.blog > div > div > p.derecha img{
   width:100%;
   height:100%;
 }
 div.contenido > div.blog > div.items-leading.clearfix {
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }
   div.contenido > div.blog > div.items-leading.clearfix > div > p{
    font-size:3vw;
    line-height:5v;}
   #limite > div.contenido > div > h2{
     margin:0px;
   }
   /* blogaudio*/ 
  #limite > div.contenido > div.blogaudio{
  width: 80vw !important;
  margin-top: 11% !important;
  margin-bottom:10% !important;
  }
  div.blog div.category-desc p,div.blogaudio div.category-desc p{
    width: 60vw;
    font-size: 1.2rem;
  }

  
}




  /*-------------------------------------------------------------------*/





  /*one column blog*/
#limite > div.contenido{
  width: 90vw;
  margin-left:auto;
  margin-right:auto;
}
div.items-leading.clearfix{
  width: 50vw;
  margin-left:auto;
  margin-right:auto;
}



#limite > div.contenido > div > h2{
  position:relative;
  animation-name: title_cum;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}
/* first tittle animation*/ 

@keyframes title_cum {
  
    0%   {margin-left:-34vw;}
    25%  {margin-left:10vw;}
    50% {margin-left:-3vw;}
    75% {margin-left:1vw;}
    100% {margin-left:0vw;}
}


/* item tittle animation*/ 
@keyframes title_big {
    0%  {transform:matrix(1,0,0,1,0,0);}
    20% {transform:matrix(1.2,0,0,1.2,-10,0);}
    40% {transform:matrix(1.2,0,0,1.2,10,0);}
    60% {transform:matrix(1.2,0,0,1.2,-5,0);}
    80% {transform:matrix(1.2,0,0,1.2,2,0);}
    100% {transform:matrix(1,0,0,1,0,0);}
}
div.page-header h2:hover{
  animation-name: title_big;
  animation-duration: 1.5s;
 animation-timing-function: ease-in-out;
}

/* blogaudio*/ 
#limite > div.contenido > div.blogaudio{
  width: 50vw;
  margin-left:  auto;
  margin-right:  auto;
  margin-top: 6vw;
  margin-bottom:  6vw;
}