body { background-color: #f3f4f6; }

#card_associado { position: absolute; max-width: 320px; height: 510px; right: 50%; margin-right: -160px; }
#doc_associado, #nome_associado, #data_associado { position: absolute; width: 450px; top: 485px; color: #FFF; transform-origin: top right; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
#doc_associado { right: 135px; font-size: 23px; letter-spacing: 7px; }
#nome_associado { right: 215px; }
#data_associado { right: 268px; }

/* PUREPAGE */

#purepage .left { width:50%; float: left; margin-right:20px; margin-bottom:20px; }
#purepage .right { width:50%; float: right; margin-left:20px; margin-bottom:20px; }
#purepage .none { margin-bottom:20px; }
#purepage .none img { width: 100%; display: block; }
#purepage .esquerda { width:100%; height:auto; float:left;  }
#purepage .direita { width:100%; height:auto; float:right;  }
#purepage div.caption { position: relative; }
#purepage div.caption p { width: 100%; display: inline-block; padding: 5px 10px; font-size: 14px; bottom: 0; left: 0; background-color: #fff; }

/* MEDIA QUERY */

@media only screen and (max-width: 767px) {
	.ui.container { margin-left: auto!important; margin-right: auto!important; }
	.ui.items:not(.unstackable)>.item { margin: 0 !important; }
}

@media only screen and (max-width: 480px) {
	#purepage .left { float: left; width:100%; margin-right:0px; margin-bottom:20px; }
	#purepage .right { float: right; width:100%; margin-left:0px; margin-bottom:20px; }
}