@charset "UTF-8";

/*---------GENERAL---------*/

@font-face {
    font-family: 'ArialNarrow';
    src: url('../fonts/arial_narrow-webfont.eot');
    src: url('../fonts/arial_narrow-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/arial_narrow-webfont.woff2') format('woff2'),
         url('../fonts/arial_narrow-webfont.woff') format('woff'),
         url('../fonts/arial_narrow-webfont.ttf') format('truetype'),
         url('../fonts/arial_narrow-webfont.svg#arial_narrowregular') format('svg');
}
@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/Helvetica-Bold.ttf') format('truetype'),
}
@font-face {
    font-family: 'HelveticaNeue';
    src: url('../fonts/HelveticaNeueLTStd-Lt.woff') format('woff');
}
img{
	border:none transparent 0px;
}
* {
	margin: 0px;
	padding: 0px;
    font-family: Arial;
    color: #666666; 
}
li {
	list-style-type: none;
}
a, button{
	text-decoration: none;
	cursor:pointer;	
}
input:focus, textarea:focus{
    outline:0px;
}
button{
    border: none;
    background: transparent;
    text-decoration: none;
    cursor:pointer;     
}
button:focus{
    outline:0px;
}
table{
    border-spacing: 0;    
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul{
    list-style: none;
    margin:0;
    padding:0;
}
html, body{
    height: 100%;
    width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    position: relative;
    z-index: 0;    
}
.mobile{
    display: none;
}
.desktop{
	display: block;
}
.active{
    color: #8B182E;
}

/*---------MENU-----------*/

.welcome{
    margin-top: 1em;
	padding-bottom: 1em;
}
.welcome b{
	font-family: 'Helvetica';
}
#mainmenu{
	position: fixed;
	overflow-y: auto;
	left: 0;
	top: 0;
	width: 310px;
	height: 100%;
	background: #F7F7F7;
}
#mainmenu > ul{
	padding: 10px;
}
#mainmenu > ul > li{
    display: block;
    width: 270px;
    padding: 10px;
    clear: both;
}
#mainmenu a:hover{
	color: #F90D74;
}
#mainmenu .left{
	width: 200px;
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
}
#mainmenu .right{
	float: right;
	padding-top: 10px;
	padding-bottom: 10px;	
}
.first-level{
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.second-level{
	padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 240px;
	display: none;
}
.logout-button{
	font-style: oblique;
	font-size: 0.8em;
}
.down-menu{
	font-size: 1em;
	padding-right: 10px;
}

/*---------PAGE-----------*/

.breadcrumbs{
    position: fixed;
    font-size: 0.8em;
    left: 0.5em;
    top: 0.5em;
}

/*---------FORM-----------*/



/*-------------GRID----------*/

.grid-view{
    width: 900px;
    margin: 0 auto;
}

.summary{
    width: auto;
    position: relative;
    color: #fff;
    top: -2em;
    right: 1em;
    float: right;
}
th{
    width: 10%;
    font-size: 0.7em;
    text-align: center;
}
th:first-child{
    width: 4%;
}
th:last-child{
    width: 110px !important;
    display: block;
}
td{
    text-align: center;
}
tr{
    height: 100px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
tbody{
    font-size: 0.9em;
}
.items{
    width: 900px;
}
.odd{
    background-color: #ffe8f3;
    color: #fff;
}
.even{
    background-color: #f5f5f5;
}
td > img{
    width:100px;
}
td img:last-child{
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;       
}
.auto{
    width: 30px !important;
}
.button-column img{
    width: 30px !important;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;    
}
.button-column img:hover{
    -moz-transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.individual{
    cursor: pointer;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;    
}
.individual:hover{
    -webkit-box-shadow: 0 0 15px -5px rgba(0,0,0,0.3);
    box-shadow: 0 0 15px -5px rgba(0,0,0,0.3);    
    -moz-transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1.2) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.maximo{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;    
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
}
.cerrar{
    width: 30px;
    position: fixed;
    z-index: 5;
    top: 1em;
    right: 1em;
    cursor: pointer;
}

.bg-clientes{
    background-image: url(../images/background/bg-login-form.jpg);
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-position: center;
}

@media all and (max-width: 800px) {
    #content{
        width: 100%;
    }
    .form{
        width: 80% !important;
        padding: 5%;
        margin: 5% !important;
        margin: 0;
        display: block;
        padding-bottom: 4em;
    }

}