body{background-color: #fafafa;}
body.navbar-side-open { overflow: hidden;}
.container-fluid { max-width: 1600px;}

/*MARGINS*/
.margin-top-45{margin-top: 45px;}
.margin-right-10{margin-right: 10px;}
.margin-left-10{margin-right: 10px;}
.margin-left-30{margin-right: 30px;}

/*NAVBAR*/
.navbar { height: 60px; margin-bottom: 15px}
.navbar .navbar-toggler{margin-right: 15px;}
.navbar .linia { border-right: 1px solid #fff;}
#navbar-side { position: fixed; top: 60px; left: 0; height: calc(100vh - 60px); z-index: 1040; background-color: #fff; width: 225px;
	transform: translateX(-225px); transition: transform 0.5s ease-in-out; color: #757473;}
.wrapper { position: fixed; height: 100%; width: 100%; z-index: 99; top: 60px; left: 0; visibility: hidden;}
.wrapper:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, .6); z-index: 1035; opacity: 0; visibility: hidden; transition: all 0.5s ease-in-out;}
.navbar-side-open{overflow: hidden;}
.navbar-side-open .wrapper { visibility: visible;}
.navbar-side-open .wrapper:before { opacity: 1; visibility: visible;}
.navbar-side-open #navbar-side { transform: translateX(0);}
#navbar-side .navbar-close { background-color: transparent; border: none; position: absolute; top: 15px; right: 15px;}
#navbar-side .menu { list-style: none; padding: 15px 0; margin-bottom: 0; margin-left: auto; margin-right: auto;}
#navbar-side .menu li { border-bottom: 1px solid #e5e5e5;}
#navbar-side .menu a{ padding: 10px 15px; display: block;}
#navbar-side .menu i { width: 25px; font-size: 1.13rem;}

.formulari-cercador { margin-right: 0; margin-top: 5px;}
.formulari-cercador button { top: 12px; left: 5px;}
.formulari-cercador .form-control { background-color: #ededed!important; border-radius: 15px; width: 300px; max-width: 100%; 
	height: 50px; padding-left: 40px;}

@media (min-width: 576px){
	#navbar-side { width: 470px; transform: translateX(-470px);}
}

@media (min-width: 992px){
	.navbar { padding: 0.5rem 60px; margin-bottom: 0}
	#navbar-side { position: fixed; left: 0; top: 60px; height: auto; background-color: #fff;  width: 100%!important; transform: none;
	transition: none; color: #000; }
	#navbar-side .menu{padding: 0 50px; height: 60px;}
	#navbar-side .menu li { border-bottom: none; float: left; margin-right: 15px;}
	#navbar-side .menu a { padding: 18px 10px; }
	.margin-navbar{margin-top: 180px;}
	.margin-navbar-home{margin-top: 135px;}
}

/*SLIDER*/
.slider-areaclient { margin-bottom: 30px;}
.slider-areaclient .slick-prev,
.slider-areaclient .slick-next { top: -45px; -webkit-transform: none; -ms-transform: none; transform: none; border-radius: 5px;}
.slider-areaclient .slick-prev { right: 50px; left: auto;}
.slider-areaclient .slick-next { right: 0;}
.slider-areaclient .item{border-radius: 5px;}
.slider-areaclient .container-fluid{ top: auto; bottom: 15px; -webkit-transform: none; -o-transform: none; transform: none;}

@media (min-width: 576px){
	.slider-areaclient .nom { margin-bottom: 15px;}
	.slider-areaclient .txt { margin-bottom: 15px;}
}

/*HOME*/
.titol-home { font-weight: 500; text-transform: uppercase; font-size: 1.13rem;}
.img-block { background-color: #eaeaea; border-radius: 5px;}
.img-block img, .img-block i{font-size: 50px;}

/*SECCIO*/
.titol-seccio { padding-top: 15px; padding-bottom: 15px; margin-bottom: 15px;}

/*NOTICIES*/
.noticia-block{border: none; padding: 0;}

/*DOCUMENTS*/
.document-block{border: 1px solid #f3f3f3; padding: 10px; margin-bottom: 15px; position: relative;}
.document-block .ico-left-txt{padding-right: 25px;}
.document-block .fa-chevron-down { position: absolute; top: 15px; right: 15px; color: #4a4a4a;}
.document-block .data{font-size: .88rem;}
.document-block .firmat{font-size: .88rem; color: #878787; font-style: italic;}
.document-block .icos{ margin-top: 15px; margin-left: auto;}
.document-block .icos .cercle, .document-block .cercle.descarrega { background-color: #cccdcd; color: #fff; height: 70px; line-height: 70px; 
	width: 70px; border-radius: 50%; display: inline-block; text-align: center; margin-bottom: 5px; font-size: 30px; }
.document-block .cercle.descarrega { position: absolute; top: 15px; right: 15px; height: 25px; line-height: 25px; width: 25px; font-size: 15px;}
.document-block .icos span{ font-size: .88rem; display: block; text-align: center;}
.modal-content { border-radius: 0;}
.categoria-block { margin-bottom: 30px; border: none; padding: 0; font-size: .88rem; text-align: center;}
.categoria-block img{margin-bottom: 15px;}

@media (min-width: 576px){
	.document-block{ padding: 15px;}
	.document-block .ico-left-txt{padding-right: 50px;}
	.document-block .cercle.descarrega { height: 50px; line-height: 50px; width: 50px; font-size: 30px;}
}

@media (min-width: 1200px){
	.documents-block{padding: 15px; background-color: #ffffff; padding: 15px; border-radius: 5px; border: 1px solid #e6e6e6; color: #5c757d;
		margin-bottom: 30px;}
	.documents-block .titol{color: #4d4d4d; margin-bottom: 5px;}
	.documents-block .linia{border-bottom: 1px solid #b2b2b2; margin-top: 5px; margin-bottom: 5px;}
	.documents-block .firmat{font-size: .88em; color: #878787; font-style: italic;}
	.document-block-xl .cercle{ background-color: #cccdcd; color: #fff; height: 28px; line-height: 28px; width: 28px; border-radius: 50%;
	display: inline-block; text-align: center; margin-bottom: 5px; font-size: 10px; margin-left: auto; margin-right: auto;}
	.document-block-xl .data, .document-block-xl .nom{font-size: .88em;}
	.document-block-xl .tamany{font-size: .88em;}
}

/*FIRMA*/
#firma_container canvas { border: 1px solid #000; width: 100%; height: calc(100vh - 250px); min-height: 200px; max-height: 350px;}
#aviso_pantalla { max-width: 100%;}

@media (min-width: 576px){
	#firma_container canvas { height: 150px; min-height: 150px;}
}

/*.portrait { position: relative; width: 150px; height: 100px; margin-left: auto; margin-right: auto;}
.portrait .portrait-1, .portrait .portrait-2{position: absolute; top: 0; left: 0; width: 100%;}
.portrait  .portrait-1 { animation: portrait1 2s infinite; opacity: 1;}
.portrait  .portrait-2 { animation: portrait2 2s infinite; opacity: 0;}

@media (orientation: portrait) and (max-width: 767px){
	.d-portrait-none{display: none!important;}
	.d-portrait-block{display: block!important;}
}

@media (orientation: landscape) and (max-width: 767px){
	.d-landscape-none{display: none!important;}
	.d-landscape-block{display: block!important;}
	.d-landscape-inline-block{display: inline-block!important;}
}

@keyframes portrait1 { 50% { opacity: 0;}}
@keyframes portrait2 { 50% { opacity: 1;}}*/