*{
    font-family: "Roboto-Light";
    box-sizing: border-box;
}

body{
}

.main-title span{
    font-size: 250% !important;
}


.section-container{
    height: auto;
    background-color: white;    
}


.main{
    /*font-size: 260%;*/
    left: 0%;
    width: 100%;
    height: auto;
    margin-top: 0%;
    padding: 5% 0% 2% 0%;    
    overflow-y: hidden;
    
}

.bulletins-section{
    height: auto;  
    padding: 0;
}



#bulletin-img{ 
    left: 8%;
    padding: 0 0 0 8%;
    margin: 0;
    margin-top: -2%;
}


#container{
    height: auto;
    width: 33%;
    padding: 0;
    margin: 1% 0;
}

.section-container{
    width: 100%;
    height: auto;    
    padding: 0.5% 0;        
    padding-bottom: 0.5%;
    text-align: center;
}

.section-container label{
    width: 100%;
    padding: 1% 0;
    font-size: 110%;
}

.section-container-resized{
    padding: 8% 0 0 0 !important;
    overflow: visible !important;
} 

.span-btn{
    margin: 0 0.2%;
    font-size: 170%;
    left: 10%;
    color: white;
    height: auto;
    text-align: center;    
    text-shadow: 4px 4px 10px #C1C1C1;   
    padding: 3% 0;
    border-radius: 5%;
    cursor: pointer;    
}

.span-btn:hover{
    transform: scale(1.05);
    z-index: 3;
    margin: 0% 1.5%;
}

.span-btn:after{
    position: absolute;
    top: 2%;
    left: 0%;
    width: 100%;
    height: 100%;       
    content: '';
    display: inline-block;
    visibility: visible;  
    z-index:  -1;    
    border-radius: 5%;
    opacity: 0.95;
    border-bottom: 5px solid gray;   
    
    -webkit-box-shadow: -2px 2px 7px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: -2px 2px 7px -2px rgba(0,0,0,0.75);
    box-shadow: -2px 2px 7px -2px rgba(0,0,0,0.75);
}

.span-btn-close{
    position: absolute;
    font-size: 120%;
    display: none;
    width: auto;
    height: auto;
    opacity: 0.45;
    padding: 0 2% !important;
    z-index: 5;
    border-radius: 15% !important;
    background-color: red !important;
    color: white;
}

.span-btn-close:hover{
    opacity: 1;
    background-color: red !important;
}

.span-100{
    display: block !important;
    top: 0;
}

.span-100:hover{
    transform: none !important;
}

.width-0{
    padding: 0 !important;
    width: 0px !important;
}

#bulletin-type{
    padding-top: 23%;
} 

#bulletin-type span{
    font-size: 150%;
    margin: 0.5% 11% !important;
    /*padding: 2% 0 !important;*/
    left: 13%;
    top: 5%;
    background-color: #006bcf;
}

#bulletin-type span:after{
    background-color: #006bcf;
}

#bulletin-type .span-btn-close{
    top: 50% !important;
    left: 6% !important;
}

#bulletin-type .span-100{
    left: 15%;
    /*width: 75% !important;*/
}

#bulletin-type .font-size-big{
    font-size: 230% !important;
    margin: 0 2%;
}

#bulletin-type .font-size-small{
    font-size: 140% !important;
}

#bulletin-year{
    overflow: hidden;   
    padding: 2% 8%;    
    left: 0%;  
}

#bulletin-year label{
    left: 0%;
}

#bulletin-year span{
    font-size: 180%;
    /*left: -6%;*/
    margin: 1% 21% !important;
    background-color:/* #71bd22*/#E7B022;
}


#bulletin-year span:after{
    padding: 0% 0;
    background-color: /*#71bd22*/#E7B022;
    /*background-color: #006bcf;*/
}

#bulletin-year .span-btn-close{
    top: 46% !important;
    left: 0% !important;
}

#bulletin-year .span-100{
    width: 60% !important;
    background-color: /*#71bd22*/#E7B022;
}


#bulletin-year .span-100:hover:after{

    background-color: /*#71bd22*/#E7B022 !important;
}

#bulletin-year .font-size-big{
    font-size: 200% !important;
}

#bulletin-year .font-size-big:after{
    background-color: /*#71bd22*/#E7B022 !important;
}

#bulletin-year .font-size-big:hover{
    transform: none !important;
}

#bulletin-year .font-size-small{
    font-size: 120% !important;
}

#bulletin-year .font-size-small:after{
    background-color: lightgray !important;
}


#bulletin-month {
    overflow: hidden;      
}

#bulletin-month label{
    left: 0%;
}


#bulletin-month div span{
    left: 0%;
    font-size: 150%;
    margin: 1% 1.5% !important;
    padding: 1% 0;
    background-color: #D5D5D5 !important;
}

#bulletin-month div span:after{
    padding: 0% 0% !important;
    background-color: lightgray;
}

#bulletin-month div .font-size-big{
    font-size: 175% !important;
    /*Pruebas*/
    background-color: #FF9F19 !important;
    /*padding: 2% 0% !important;*/
    margin: 0.5% 1.5% !important;
}

#bulletin-month div .font-size-big:after{
    background-color: #ff9a0c !important;
}

#bulletin-month div .font-size-big:hover{
    transform: none !important;
}

#bulletin-month div .font-size-small{
    font-size: 100% !important;
    /*Prueba*/
    /*padding: 2% 0 !important;*/
    margin: 0.5% 1.5% !important;
    background-color: #D5D5D5 !important;
}

#bulletin-month div .font-size-small:after{
    /*background-color: lightgray !important;*/
    background-color: #D5D5D5 !important;
}






#bulletin-files{
    float:  right !important;
    width: 65%;
    height: 39em !important;
    padding: 0% 3%;
    margin: 0;
    overflow-y: scroll;
    display: none;    
}

.div-file{
    padding: 1%;
    margin: 1%;
    width: 31%;
    height: 23em;
}

.div-file:hover{
    transform: scale(1.05);
}

.img-file, .div-file span{
    width: 100%;
    font-size: 100%;
    color: #0563af;
}

.img-no-file{
    width: 90%;
    
    padding: 1% 24%;
    margin-left: 5%;
    margin-top: 2%;   
}

.span-no-file{
    width: 100%;
    padding: 1% 15%;
    font-size: 230%;
    opacity: 0.5;
}


.ajs-dialog{
    width: 25% !important;
    margin-top: 20% !important;
    font-size: 260% !important;
    background-color: #FF2D2D !important;
    border: 2px solid #FF2D2D;
    color: #0563af;
}

.ajs-header{    
    font-size: 150% !important;
}

.ajs-content{
    color: white;
    text-align: center;
}

.ajs-button{
    text-align: center;
}




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

}

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

}

@media screen and (max-width: 3701px){
  
}
@media screen and (max-width: 3651px){
  
}
@media screen and (max-width: 3601px){
   
}
@media screen and (max-width: 3551px){
  

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

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

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

}
@media screen and (max-width: 3351px){
 
}
@media screen and (max-width: 3301px){
   
}
@media screen and (max-width: 3251px){
   
}
@media screen and (max-width: 3201px){
  

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

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

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

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

}

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

    
}

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

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

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

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

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

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

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

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

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




/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------CSS MOBILE PORTRAIT------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/



@media screen and (max-width: 991px) and (orientation:portrait){
    
    .ajs-dialog{
        font-size: 200%;
    }
    
    .bulletins-main{
    
        /*font-size: 200% !important;*/
        left: 0%;
        width: 100%;
        height: auto;
        /*height: 95.5%;*/
        margin-top: 0%;
        padding: 15% 0% 20% 0%;
        overflow: auto;
        
    }
    
    .bulletins-title{
        top: 5%;
        left: 0%;
    }
    
    .bulletins-title span{
        font-size: 120%;
        padding-bottom: 3%;
    }

    
    #bulletin-img{
        left: 16%;
        top: 0%;
        margin: 8% 0;
        padding: 0;
    }
    
    
    #container{
        left: 0;
        margin: 0;
        width: 100%;
    }
    
    .section-container{        
        display: initial;  
        margin-top: 2%;
    }
    
    .section-container-resized{
        padding-top: 3%;
    }
    
    .span-btn{
        font-size: 100% !important;    
    }
       
    .span-btn:hover{
        transform: none;        
        margin: 0;
    }
    
    .span-btn-close{
        background-color: #D89D9D !important;
        opacity: 0.7;
    }
    
    .span-btn-close:active{
        background-color: red;
    }
    
    #bulletin-type{
        margin: 0;
        padding: 13% 0;
    }
    
    #bulletin-type .span-btn{
        left: 12% !important;
        margin: 1% 17% !important;
    }
    
    #bulletin-type .span-100{
        /*width: 80% !important;*/
        left: 13% !important;
    }
    
    #bulletin-type .span-btn-close{
        font-size: 100% !important;
        left: 11% !important; 
        top: 53% !important; 
    }
    
    #bulletin-year{
        display: initial !important;
        width: 100%;      
        left: 0%;
    }
    
    #bulletin-year .span-btn{ 
        width: 22%;
        left: 14% !important;
        margin: 0 1%;
    }
    
    #bulletin-year .span-100{
        left: 33% !important;
        width: 55% !important;
    }
    
    #bulletin-year .span-btn-close{
        top: 53% !important;
        font-size: 100%;
        left: 5% !important;
    }
    
    #bulletin-year .font-size-big{
        margin-top: -1% !important;
    }
    
    #bulletin-month{
        display: block;
        position: relative;
        float: left;
        padding: 0 1%;
    }
    #bulletin-month label{
        left: 0;
    }
    
    #bulletin-month .span-btn{
        left: 0%;
        margin: 1% 1%;
        width: 30%;
        font-size: 120% !important;
    }

    #bulletin-month .font-size-big{
        font-size: 120% !important;
        margin: 1% 1%;
    }
    
    #bulletin-month .font-size-small:after{
        background-color: lightgray;
    }  
        
    #bulletin-files{
        margin-top: 7%;
        height: auto !important;
        width: 100%;
        /*height: 70%;*/
        border: none;
        border-top: 1px solid lightgray;
        padding-bottom: 15%;
        
    }
    
    .div-file{
        left: 1%;
        height: 14em;
    }
        
    .span-100{
        width: 75% !important;
        padding: 1% 0%;
    }
    
    .font-size-big{
        font-size: 140% !important;
        margin: 0 2%;
    }

    .font-size-small{
        font-size: 110% !important;
    }
    
    .ajs-dialog{
        width: 50% !important;
        margin-top: 65% !important;
    }
            
  
    .img-no-file{
        padding: 1% 33%;
        /*margin-top: 0%;*/
    }
    
    .span-no-file{
        padding: 0;
        font-size: 160%;
    }
    
}

@media screen and (max-width: 941px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 189% !important;
    }
    

    
    
}

@media screen and (max-width: 891px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 179% !important;
    }

  
    

}

@media screen and (max-width: 841px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 169% !important;
    }

  
    
}

@media screen and (max-width: 801px) and (orientation:portrait){
     .bulletins-mainn, .ajs-dialog{
        font-size: 161% !important;
    }
   
    

}

@media screen and (max-width: 768px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 154% !important;
    }

    

}

@media screen and (max-width: 711px) and (orientation:portrait){
     .bulletins-mainn, .ajs-dialog{
        font-size: 143% !important;
    }
    
 
    
}

@media screen and (max-width: 661px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 133% !important;
    }
    
  
    
    
    
    
}

@media screen and (max-width: 601px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 121% !important;
    }
        
    
    
}

@media screen and (max-width: 551px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 111% !important;
    }

  
    
    

}

@media screen and (max-width: 501px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 101% !important;
    }
    
        
   
    
    
}

@media screen and (max-width: 451px) and (orientation:portrait){
     .bulletins-mainn, .ajs-dialog{
        font-size: 91% !important;
    }
 
    
    

}

@media screen and (max-width: 421px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 84% !important;
    }    
    
    
    
}

@media screen and (max-width: 391px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 78% !important;
    }
    
 
    

}

@media screen and (max-width: 351px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 70% !important;
    }
    
    
    
}

@media screen and (max-width: 331px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 66% !important;
    }
    
  
    
}

@media screen and (max-width: 301px) and (orientation:portrait){
     .bulletins-mainn, .ajs-dialog{
        font-size: 60% !important;
    }
    
   
    

}

@media screen and (max-width: 251px) and (orientation:portrait){
    .bulletins-mainn, .ajs-dialog{
        font-size: 50% !important;
    }
    
 
    
}




/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------CSS MOBILE LANDSCAPE-----------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/



@media screen and (max-width: 991px) and (orientation:landscape){
    
    body{
        /*overflow-y: hidden;*/
    }
    
    .ajs-dialog{
        font-size: 130% !important;
    }
    
    .bulletins-main{
        /*font-size: 130% !important;*/        
        height: 24em;
        margin-top: 0%; 
        /*overflow: auto;*/
    }
    
    .bulletins-title{
        width: 60% !important;
        top: 5%;
        left: 0%;
    }
    
    .bulletins-title span{
        font-size: 150% !important;
        padding-bottom: 1%;
    }
    
    .section-container-resized{
        margin: 0;
        padding-top: 3%;
    } 
    
    #container{
        width: 42%;
        left: 4% !important;
    }
    
    
    .span-btn{
        font-size: 110% !important;
    }
    
    
    .span-btn:hover{
        transform: none;        
        font-size: 120%;
        margin: 0 0.5%;
    }
    
    .span-btn-close{
    
        font-size: 110% !important;
        background-color: #D89D9D !important;
        opacity: 0.7;
    }
    
    #bulletin-type{
        margin: 0;
        /*margin-top: 10%;*/
        padding-top: 17%;
    }
    
    #bulletin-type .span-btn{
        max-width: 100% !important;
        width: 75% !important;
        margin: 1% 12.5%;
        padding: 2% 0;
        left: 0%;
    }

    
    #bulletin-type .span-100{
        /*width: 80% !important;*/
    }
    
    #bulletin-type .span-btn-close{
        margin: 0;
        top: 50% !important;
        left: 2% !important;
    }
    
    #bulletin-year label{
        left: 4%;
    }
    
    #bulletin-year .span-btn{
        left: 0%;
        width: 30% !important;
        max-width: 100% !important;
        margin: 2% 1.5%
    }
    
    #bulletin-year .span-100{
        left: 20% !important;
        width: 60% !important;
        padding: 2% 0;
    }
    
    #bulletin-year .span-btn-close{
        margin: 0;
        left: 11% !important;
        top: 49% !important;
    }
    
    #bulletin-year .font-size-big{
        margin-top: -1.9%;
    }

    #bulletin-month{
        display: initial;
    }
    
    #bulletin-month label{
        display: none;
    }
    
    #bulletin-month span{
        margin: 0.5% 0.5%;
    }
    
    #bulletin-month div .span-btn{
        max-width: 100% !important;
        min-width: 30% !important;
        width: 31% !important;
        left: 0;
    }
    
     #bulletin-month div .font-size-big{
        font-size: 125% !important;
    }
    
    #bulletin-files{
        height: 27em !important;
        width: 54% !important;
        padding-top: 3%;
        padding-bottom: 10%;
        overflow: auto;
    }
    
    .div-file{
        display: initial;
        width: 30%;
        padding: 0;
        margin: 1%;
        height: 9.5em;
    }
    
    .img-file{
        left: 10%;
        top: 0%;
        width: 80%;
        height: auto;
    }
    
    .div-file span{
        text-align: center;
        left: 5%;
        width: 90%;
        font-size: 80%;
    }
    
    
    #bulletin-img{
        padding: 0 6%;
        width: 50%;
        left: 8%;
        margin-top: 1.5%;
    }
    
    .img-no-file{
        padding: 1% 15%;
        margin-top: 3%;
    }
    
    .span-no-file{
        padding: 0;
        font-size: 160%;
    }
    
    .ajs-dialog{
        margin-top: 10% !important;
    }
    
}

@media screen and (max-width: 941px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 123% !important;
    }

    
}

@media screen and (max-width: 891px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 117% !important;
    }

 

}

@media screen and (max-width: 841px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 111% !important;
    }


}

@media screen and (max-width: 801px) and (orientation:landscape){
     .bulletins-mainn, .ajs-dialog{
        font-size: 106% !important;
    }

}

@media screen and (max-width: 768px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 101% !important;
    }
    
    .divSocial{
        width: 37px;
        height: 37px;
    }


}

@media screen and (max-width: 711px) and (orientation:landscape){
     .bulletins-mainn, .ajs-dialog{
        font-size: 95% !important;
    }
    

    
}

@media screen and (max-width: 661px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 88% !important;
    }
    

    
}

@media screen and (max-width: 601px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 80% !important;
    }
    

}

@media screen and (max-width: 551px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 75% !important;
    }
}

@media screen and (max-width: 501px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 67% !important;
    }
}

@media screen and (max-width: 451px) and (orientation:landscape){
     .bulletins-mainn, .ajs-dialog{
        font-size: 59% !important;
    }
    .divSocial{
        width: 30px;
        height: 30px;
    }

}

@media screen and (max-width: 421px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 55% !important;
    }
}

@media screen and (max-width: 391px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 51% !important;
    }

}

@media screen and (max-width: 351px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 46% !important;
    }
}

@media screen and (max-width: 331px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 43% !important;
    }
}

@media screen and (max-width: 301px) and (orientation:landscape){
     .bulletins-mainn, .ajs-dialog{
        font-size: 39% !important;
    }

}

@media screen and (max-width: 251px) and (orientation:landscape){
    .bulletins-mainn, .ajs-dialog{
        font-size: 32% !important;
    }
}