/* BASE */

/* margin + padding */
.ma05 { margin: 5px }
.mt05 { margin-top: 5px }
.mb05 { margin-bottom: 5px }
.ml05 { margin-left: 5px }
.mr05 { margin-right: 5px }
.mtb05 { margin-top: 5px; margin-bottom: 5px }
.mlr05 { margin-left: 5px; margin-right: 5px }

.ma1 { margin: 10px }
.mt1 { margin-top: 10px }
.mb1 { margin-bottom: 10px }
.ml1 { margin-left: 10px }
.mr1 { margin-right: 10px }
.mtb1 { margin-top: 10px; margin-bottom: 10px }
.mlr1 { margin-left: 10px; margin-right: 10px }

.ma2 { margin: 20px }
.mt2 { margin-top: 20px }
.mb2 { margin-bottom: 20px }
.ml2 { margin-left: 20px }
.mr2 { margin-right: 20px }
.mtb2 { margin-top: 20px; margin-bottom: 20px }
.mlr2 { margin-left: 20px; margin-right: 20px }

.pa05 { padding: 5px }
.pt05 { padding-top: 5px }
.pb05 { padding-bottom: 5px }
.pl05 { padding-left: 5px }
.pr05 { padding-right: 5px }
.ptb05 { padding-top: 5px; padding-bottom: 5px }
.plr05 { padding-left: 5px; padding-right: 5px }

.pa1 { padding: 10px }
.pt1 { padding-top: 10px }
.pb1 { padding-bottom: 10px }
.pl1 { padding-left: 10px }
.pr1 { padding-right: 10px }
.ptb1 { padding-top: 10px; padding-bottom: 10px }
.plr1 { padding-left: 10px; padding-right: 10px }

.pa2 { padding: 20px }
.pt2 { padding-top: 20px }
.pb2 { padding-bottom: 20px }
.pl2 { padding-left: 20px }
.pr2 { padding-right: 20px }
.ptb2 { padding-top: 20px; padding-bottom: 20px }
.plr2 { padding-left: 20px; padding-right: 20px }

/*opacity*/
.op1 { opacity: 0.1; filter: alpha(opacity=10) } .op1h { opacity: 0.1 } .op1h:hover { opacity: unset }
.op2 { opacity: 0.2 }
.op3 { opacity: 0.3 }
.op4 { opacity: 0.4; filter: alpha(opacity=40) } .op4h { opacity: 0.4 } .op4h:hover { opacity: unset }
.op5 { opacity: 0.5 }
.op6 { opacity: 0.6; filter: alpha(opacity=60) } .op6h { opacity: 0.6 } .op6h:hover { opacity: unset } .op6hl { opacity: 0.6 } .op6hl:hover { opacity: 0.8 }
.op7 { opacity: 0.7 }
.op8 { opacity: 0.8 }
.op9 { opacity: 0.9 }

/*cursor*/
.cp, .cpu, cpl { cursor: pointer }
.cpu, cpl { text-decoration: underline }
.cpl { color: blue }

/*display*/
.dn { display: none }
.db { display: block }
.df { display: flex }
.dib { display: inline-block }

/*float*/
.fc {display: inline-block}
.fl {float: left  !important}
.flc {display: inline-block}
.fr {float: right  !important}
.frc {display: inline-block}

/*center*/
.cw { margin: 0 auto }
.ch { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}

/*vertical-align*/
.vat { vertical-align:top; }
.vam { vertical-align:middle; }
.vab { vertical-align:bottom; }

/*text-align*/
.tal {text-align: left}
.talc {text-align: center}
.tar {text-align: right}
.tarc {text-align: center}
.tac {text-align: center}
.taj {text-align: justify}
.tajc {text-align: center}

@media only screen and (min-width: 601px) {
	.talc {text-align: left}
	.tarc {text-align: right}
	.tajc {text-align: justify}
}

/*position*/
.psr { position: relative }

.psal { position: absolute; top: 0; left:0 }
.psar { position: absolute; top: 0; right:0 }
.psac { position: absolute; top: 0; left:0; right:0 }

.psabl { position: absolute; bottom: 0; left:0 }
.psabr { position: absolute; bottom: 0; right:0 }
.psabc { position: absolute; bottom: 0; left:0; right:0 }

/*.psaca { position: absolute; top: 50%; transform: translateY(-50%); left:0; right:0 }/*center absolute*/
.psact { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }/*center absolute top*/
.psacb { position: absolute; bottom: 50%; left: 50%; transform: translate(-50%, -50%); }/*center absolute bottom*/

.psf { position: fixed; top: 0; left:0 }/*psft*/
.psfb { position: fixed; bottom: 0 }


/*percent*/
.per::after { content: "%"; font-size: 0.7em; margin-left: 0.1em }

/*shadow*/
.bs { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) }

/*circle*/
.cir { border-radius: 50%; }

/*functions*/
.truncate { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hoverable { transition: box-shadow .25s; box-shadow: 0; }
.hoverable:hover { transition: box-shadow .25s; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

/*border radius*/
.br5 { border-radius: 5px }
.br05 { border-radius: 0 5px }
.br50 { border-radius: 5px 0 }
.br5500 { border-radius: 5px 5px 0 0 }
.br0055 { border-radius: 0 0 5px 5px }
.br0550 { border-radius: 0 5px 5px 0 }
.br5005 { border-radius: 5px 0 0 5px }

.br5r { border-radius: 5px }
.br05r { border-radius: 0 5px }
.br50r { border-radius: 5px 0 }
.br5500r { border-radius: 5px 5px 0 0 }
.br0055r { border-radius: 0 0 5px 5px }
.br0550r { border-radius: 0 5px 5px 0 }
.br5005r { border-radius: 5px 0 0 5px }
@media only screen and (max-width: 360px) {
	.br5r,
	.br05r,
	.br50r,
	.br5500r,
	.br0055r,
	.br0550r,
	.br5005r { border-radius: 0 }
}

/*HOVER*/
.hov1 .hov2 { display:none }
.hov1:hover .hov2 { display:block }


/* clearfix */
/*.cf {clear: both}*/
.cf:before, .cf:after {content:"";display:table}
.cf:after {clear:both}
.cf {zoom:1}

/***************/

.dnxxs, .dnxs, .dns, .dnm, .dnl, .dnxl, .dnxxl {display:none}
.dbxxs, .dbxs, .dbs, .dbm, .dbl, .dbxl, .dbxxl {display:block}

@media only screen and (max-width: 360px) {
	.dnxxs {display:block}
	.dbxxs {display:none}
}
@media only screen and (min-width: 361px) {
	.dnxs {display:block}
	.dbxs {display:none}
}
@media only screen and (min-width: 481px) {
	.dns {display:block}
	.dbs {display:none}
}
@media only screen and (min-width: 601px) {/**/
	.dnm {display:block}
	.dbm {display:none}
}
@media only screen and (min-width: 761px) {
	.dnl {display:block}
	.dbl {display:none}
}
@media only screen and (min-width: 993px) {/**/
	.dnxl {display:block}
	.dbxl {display:none}
}
@media only screen and (min-width: 1201px) {/*/
	.dnxxl {display:block}
	.dbxxl {display:none}
}
@media only screen and (min-width: 1441px) {
	.dnxxxl {display:block}
	.dbxxxl {display:none}
}


/* PRINT */
@media print {
  * {background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important} /* Black prints faster */
  a, a:visited {color: #444 !important; text-decoration: underline}
  a[href]:after {content: " (" attr(href) ")"}
  abbr[title]:after {content: " (" attr(title) ")"}
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: ""}  /* Don't print links for images, javascript or internal links */
  pre, blockquote {border: 1px solid #999; page-break-inside: avoid; }
  thead {display: table-header-group; } /* Repeat header row at top of each printed page */
  tr, img {page-break-inside: avoid; }
  img {max-width: 100% !important; }
  @page {margin: 0.5cm}
  p, h2, h3 {orphans: 3; widows: 3}
  h2, h3{page-break-after: avoid}
}