body{
    font-family: 'Roboto Regular', arial !important;

}
    .oscurecer:hover{
        opacity: 0.7;
    }
     .header{
      
        background-color: #e65412;
        height: 80px ; 
     }
   
   

.animated {
    
   
    -webkit-animation-duration: 3s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
 }

 @-webkit-keyframes bounce {
    0% {
       opacity: 0;
       /*-webkit-transform: translateX(-2000px);*/
    }
    60% {
       opacity: 1;
     /*  -webkit-transform: translateX(30px);*/
    }
    80% {
      /* -webkit-transform: translateX(-10px);*/
    }
    100% {
       /*-webkit-transform: translateX(0);*/
    }
 }

 @keyframes bounce {
    0% {
       opacity: 0;
      /*  transform: translateX(-2000px);*/
    }
    60% {
       opacity: 1;
       /* transform: translateX(30px);*/
    }
    80% {
        /*transform: translateX(-10px);*/
    }
    100% {
      /*  transform: translateX(0);*/
    }
 }

 .bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
 }

 
/* iPhone 4 -pixel 2 ,galaxy s5 ,iphone 6/7/8,iphone 6/7/8 plus,pixel 2xl, iphone x,iphone 5/SE horizontal*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    .container { 
        
        padding-top:0px !important;
    
    }
   
    #imagen{
        max-width:20% !important;
        padding-top:0px !important;
    }
   
    .style_col{

        padding-top:20px !important;
    }
    .header{

       
        height: 60px !important; 
     }
     .icon-codelco {
        font-size: 60px!important; 
    }
    #div_titulo{
        font-size: 60% !important;
        padding-top: 20px!important;
    }
    #link{
        padding-left:20px!important; 
    }
}
/* ipad, iphone x, pixel 2xl*/
 /* iPads (landscape) */

 @media only screen 
 and (min-device-width : 768px) 
 and (max-device-width : 1024px) and (orientation : landscape)
  
 {
     .container { 
         
         padding-top:40px !important;
     
     }
    
     #imagen{
         max-width:60% !important;
         padding-top:0px !important;
     }
    
     .style_col{
 
         padding-top:40px !important;
     }
     .header{
 
        
         height: 60px !important; 
      }
      .icon-codelco {
        font-size: 50px!important; 
    }
     #div_titulo{
         font-size: 60% !important;
         padding-top: 20px!important;
     }
     #link{
        padding-left:10px!important; 
    }
 } 
 /********pixel 2xl***/
 @media only screen 
 and (min-device-width : 411px) 
 and (max-device-width : 823px) and (orientation : landscape)
  
 {
     .container { 
         
         padding-top:0px !important;
     
     }
    
     #imagen{
         max-width:15% !important;
         padding-top:0px !important;
     }
    
     .style_col{
 
         padding-top:20px !important;
     }
     .header{
 
        
         height: 50px !important; 
      }
      .icon-codelco {
        font-size: 50px!important; 
    }
     #div_titulo{
         font-size: 60% !important;
         padding-top: 10px!important;
     }
     #link{
        padding-left:20px!important; 
    }
 } 
 /* posicion horizontal, al voltear el dispositivo iphone x  se remplaza los valores de arriba*/
 @media  (min-width: 768px)  and (max-width:812px)  {  
    .container { 
    
        padding-top:5px !important;
    
    }
    .icon-codelco {
        font-size: 50px !important;
    }
    #imagen{
        max-width:20% !important;
        padding-top:0px !important;
    }
   
    .style_col{

        padding-top:5px !important;
    }
    .header{

       
        height: 50px !important; 
     }
     
    #div_titulo{
        font-size: 60% !important;
        padding-top: 20px!important;
    }
   
    #link{
        padding-left:20px!important; 
    }

}
   
/* iPads (portrait & landscape) , reemplazo pixel 2xl y iphone x*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : portrait){
    .container { 
        
        padding-top:0px !important;
    
    }
    .icon-codelco {
        font-size: 50px!important; 
    }
    
    #imagen{
        max-width:15% !important;
        padding-top:0px !important;
    }
   
    .style_col{

        padding-top:15px !important;
    }
    .header{

       
        height: 60px !important; 
     }
     .icon-codelco {
        font-size: 50px!important; 
    }
    #div_titulo{
        font-size: 60% !important;
        padding-top: 20px!important;
    }
    #link{
        padding-left:10px!important; 
    }
}

/* ipad, iphone x, pixel 2xl,galaxy s5*/
 /* iPads (landscape) */
 @media only screen 
 and (max-width : 768px) 
  
 {
     .container { 
         
         padding-top:0px !important;
     
     }
    
     #imagen{
         max-width:50% !important;
         padding-top:0px !important;
     }
    
     .style_col{
 
         padding-top:30px !important;
     }
     .header{
 
        
         height: 50px !important; 
      }
      .icon-codelco {
        font-size: 50px !important; 
    }
     #div_titulo{
         font-size: 60% !important;
         padding-top: 12px!important;
     }
     #link{
        padding-left:20px!important; 
    }
 } 
     
 
 /* Smartphones (landscape), IPHONE 5 S/E  landscape*/
@media  (min-width : 320px) and  (max-width : 568px) and (orientation : landscape){
    .container { 
        
        padding-top:0px !important;
    
    }
   
    #imagen{
        max-width:15% !important;
        padding-top:0px !important;
    }
   
    .style_col{

        padding-top:20px !important;
    }
    .header{

       
        height: 40px !important; 
     }
     .icon-codelco {
        font-size: 40px !important; 
    }
    #div_titulo{
        padding-right:70px;
        font-size: 50% !important;
        padding-top: 10px!important;
    }
    #link{
        padding-left:20px!important; 
    }
} 
 /* Smartphones (landscape), IPHONE 5 S/E  portrait*/
 @media  (min-width : 320px) and  (max-width : 568px) and (orientation : portrait){
    .container { 
        
        padding-top:0px !important;
    
    }
   
    #imagen{
        max-width:15% !important;
        padding-top:0px !important;
    }
   
    .style_col{

        padding-top:20px !important;
    }
    .header{

       
        height: 40px !important; 
     }
     .icon-codelco {
        font-size: 40px !important; 
    }
    #div_titulo{
        padding-left:20px;
        font-size: 50% !important;
        padding-top: 10px!important;
    }
    #link{
        padding-left:0px!important; 
    }
    .footer-menu{
        font-size:11px!important; 
    }
} 

/* vertical celular , galaxy s5, iphone 5 s/e,pixel 2x*/

@media  (max-width: 500px) { 
    .container { 
       
        padding-top:60px !important;
      
       
    }
    #div_titulo{
        font-size: 50% !important;
       
      
        padding-top: 15px  !important;
    }

    #imagen{
        max-width: 46% !important;
        padding-top:0px !important;
    }
    #div_sipro{
      padding-top:30px !important;

    }
    .icon-codelco {
        font-size: 50px!important;
    }
    .header{

       
        height: 50px !important; 
     }
     #link{
        padding-left:10px!important; 
    }
}
/************IPAD PRO ****************/
@media only screen 
and (min-width : 1024px) 
and (max-width : 1366px) 
 
{
    .container { 
        
        padding-top:40px !important;
    
    }
   
    #imagen{
        max-width:60% !important;
        padding-top:0px !important;
    }
   
    .style_col{

        padding-top:40px !important;
    }
    .header{

       
        height: 60px !important; 
     }
     
     .icon-codelco {
        font-size: 60px !important; position: absolute  !important;padding-top:0px !important; 
    }
    #div_titulo{
        font-size: 80% !important;
        padding-top: 20px!important;
    }
    #link{
        padding-left:20px!important; 
    }
} 
     


.style_titulo{
    color:black!important;
}

.style_col{
    
    padding-top:25px;text-align:center;
}
/*********CSS LOGO DE CODELCO************************/

.codelco-logo {
    color: #fff;
    padding-left: 30px;
    font-size: 80px;


}

@font-face {
	font-family: "codelco";
	src: url("../fonts/bootstrap/codelco.eot");
	src: url("../fonts/bootstrap/codelco.eot?#iefix")
		format("embedded-opentype"), url("../fonts/bootstrap/codelco.woff")
		format("woff"), url("../fonts/bootstrap/codelco.ttf")
		format("truetype"), url("../fonts/bootstrap/codelco.svg#codelco")
		format("svg");
	font-weight: normal;
	font-style: normal;
}

data-icon ]:before {
	font-family: "codelco" !important;
	content: attr(data-icon);
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,[class*=" icon-"]:before {
	font-family: "codelco" !important;
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



.icon-codelco:before {
	content: "\63";
}


/*****************Estilo footer*****************/
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #e65412;
    color: white;
    text-align: center;
 }
 .app-footer {
   /* padding: 10px 0;*/
    border-top: 1px solid #cccccc;
    padding-top: 5px;
    padding-bottom: 25px;
    font-size: 12px;
    text-align: right;
    background: #e65412;
    color: #fff;
    /*padding: 5px 40px;*/
}
.app-footer ul > li > a {
    display: block;
   /* padding: 0 .75rem;*/
    font-weight: 400;
    color: #fff;
}



.app-footer .footer-menu li {
    display: inline-block;
}

li {
    text-align: -webkit-match-parent;
}
.app-footer .footer-menu {
   
    float: left;
}
ul, ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.app-footer span a {
    color: white;
}
*, *::before, *::after {
    box-sizing: border-box;
}

@media  (max-width: 500px) { 
.app-footer{
   
    padding-right: 20px;
    padding-left: 20px;
}
}