@font-face {
  font-family: Open-Sans-Light;
  src: url('../fonts/cicle/OpenSans-Light.ttf');
}

@font-face {
  font-family: Italianno;
  src: url('../fonts/italianno/Italianno-Regular.ttf');
}

@font-face {
  font-family: Calibri-Light;
  src: url('../fonts/calibrilight/calibril.woff');
}

@font-face {
  font-family: Catamaran;
  src: url('../fonts/catamaran/Catamaran-Thin.ttf');
}

body{
    font-family: 'Calibri-Light';
    background-image: url(http://munisantiago.gob.pe/publicacion/images/backgroundcalca.jpg);;
    height:100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.bg-login.none{

    background-image: url(http://munisantiago.gob.pe/publicacion/images/background.jpg);;
}

#form-login{
    margin-top:5cm;
}

.container.bg-default.login-menu{
    margin-top: 2cm;
    font-family: 'Calibri-Light';
    background-image: url(http://munisantiago.gob.pe/publicacion/images/pumacalca.jpg);;
    height:100%;
    background-repeat: no-repeat;
    width:510px;
    height:592px;
}

label.control-label{
color:white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

button.btn.btn-primary{
     /* background-color: #e80000; */
     background-color: #292c7e;

}

.table{
    font-size:11px;
}

.svg-item{
    height: 100px;
    text-align: center;
    width:40%;
    margin-top:3em;
    fill: #ffffff;  
}

.div-item h5{
    color: #ffffff;
}


.item-text{
    margin-top: -0.1px;
}

.page-header{
    font-family: 'Calibri-Light';
    text-align: center;
    
    /*background-color: rgba(232, 0, 0, 0.7);*/
    background-color:#337ab7;
    padding: 20px;
    color:#ffffff;
    border-bottom:none;
}

.page-header a{
    text-decoration: none;
    color: white;
}

.div-item{
    font-family: 'Calibri-Light';
    width:200px;
    height:200px;
    text-align:center;
    vertical-align:middle;
    background-color:rgba(0, 0, 0, 0.5);
    margin:auto;

}

.footer{
    position:absolute;
    background-color: #333333;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    padding:20px;
    margin-top:2cm;
    bottom:auto;
}


.card{
    background-color:rgba(0, 0, 0, 0.5) !important;
}

.card-header{
    font-family: 'Calibri-Light';
    background-color: rgba(232, 0, 0, 0.7)  !important;
    color: #000000;
}

.card-header a{
    font-family: 'Catamaran';
    color: #ffffff;
    font-weight: bold;
}

a#cerrarsesion{
    padding: 10px 30px;   
}

.logout{
    float:right;
    margin-right:1em;
    padding:10px 20px;
    background-color:rgba(255, 255, 255, 0.5) !important;
}

.logo-entidad{
    position: absolute;
    margin-top: -1cm;
    float: left;
    margin-left: -5cm;

}


.active >svg {
    fill:#e80000;
    transform: scale(1.1);
}

.active >h5 {
    color:#e80000;
    transform: scale(1.1);
}

#item0 :hover #svg-item-0{
    transform: scale(1.1);
    fill: #e80000;
}

#item0 :hover h5{
    transform: scale(1.1);
    color: #e80000;
}

#item1 :hover #svg-item-1{
    transform: scale(1.1);
    fill: #e80000;
}

#item1 :hover h5{
    transform: scale(1.1);
    color: #e80000;
}

#item2 :hover #svg-item-2{
    transform: scale(1.1);
    fill: #e80000;
}

#item2 :hover h5{
    transform: scale(1.1);
    color: #e80000;
}

#item3 :hover #svg-item-3{
    transform: scale(1.1);
    fill: #e80000;
}

#item3 :hover h5{
    transform: scale(1.1);
    color: #e80000;
}


.item-text{
    margin-top:10px;
}

.default-section{
    margin-bottom:2cm;  
}

#vacio{
    background-color:#ffffff;
}

.div_informacion{
    font-family: 'Calibri-Light';
    margin-auto;
    background-color:rgba(0, 0, 0, 0.5);
    padding: 20px;
    margin: 70px auto;
    color: #ffffff;
    animation: SlideInLeft ease 1s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards; 

}

@media screen and (min-width: 768px){
    .table-responsive{
    display:inline-table !important;
    }
}

@media screen and (max-width: 518px){
    .container.bg-default.login-menu{
   
    width:100%;
    }
}

@media screen and (max-width: 720px){
    .logo-entidad{
    	width:60px;
    	height:60px;
	display:none;
    }

}

@media screen and (max-width: 460px){
    .logo-entidad{
    	width:60px;
    	height:60px;
        display:none;
    }


}

#item0{
            animation: SlideInDown ease 1s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
}

#item1{
            animation: SlideInUp ease 1s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
}

#item2{
            animation: SlideInDown ease 1s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
}

#item3{
            animation: SlideInUp ease 1s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
}

#informacion{
            animation: SlideInRight ease 1s; 
            animation-iteration-count: 1; 
            animation-fill-mode: forwards; 
}

@keyframes SlideInUp { 
from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
} 

@keyframes SlideInDown { 
from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
} 

@keyframes SlideInLeft { 
from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
} 

@keyframes SlideInRight{ 
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}