.logo {

	margin-left:20px;

	margin-top: -9px;

	width:350px;

	z-index:1000;

}

.counter{

	width: 20px;

	text-align: center !important;

}

.counter2{

	width: 90px!important;

}

.counter3{

	width: 140px!important;

}

.selecao{

	width: 15px;

	text-align: center !important;

}

.actions{

	width:20%;

	text-align:center;

}

.inativo{

	color: #9a9797;

	text-decoration: line-through;

}

.right{

	float: right !important;

}

.left{

	float: left !important;

}

.center{

	text-align: center !important;

}

.align-right{

	text-align: right !important;

}

.align-left{

	text-align: left !important;

}

.align-center{

	text-align: center !important;

}

.controls input[type=radio]{

	margin: -1px 5px 0 0;

}

.pointer {

   cursor:pointer;

}

.clear {

   clear:both;

}

.esconder {

   display:none;

}

.nopadding {

	padding:0px;

}

.nomargin {

	margin:0px !important;

}

.noradius {

	border-radius:0px !important;

}

.textarea-min{

	width: 120px !important;

}

.textarea-mid{

	width: 300px !important;

}

.input-min{

	width: 80px !important;

}

.input-mid{

	width: 300px !important;

}

.select-min{

	width: 120px !important;

}

.select-mid{

	width: 310px !important;

}

.input-data{

	width: 100px !important;

}

.input-cep{

	width: 100px !important;

}

.alert-menor {

	padding:5px;

}

.form-control-min {

	height:20px;

	padding: 0px;

	font-size:12px;

}

.table-responsive {

	padding: 2px;

}

.has-error {

	color: red!important;

}

.navbar {

    border:0px;

    min-height:0px;

}

.ui-tooltip {

    white-space: pre-line;

}

.ui-tooltip-content {

    white-space: pre-line;

}

table.table-bordered tbody td {

    vertical-align: middle;

}

table.table-endereco thead tr {

    background-color:#CFC7D2;

}



.table.table-borderless>tbody>tr>td, .table.table-borderless>tbody>tr>th, .table.table-borderless>tfoot>tr>td, .table.table-borderless>tfoot>tr>th, .table.table-borderless>thead>tr>td, .table.table-borderless>thead>tr>th {

  border: 0;

}

.green{

	color: #79B041;

}

.red{

	color: #d9534f;

}

.colorSelector div {

    width: 60px;

    height: 30px;

    border: 1px solid #ccc;

}

.clock {

	border-right:1px solid #ccc;

	padding-right:20px;

	color:#fff;

}

.mapa {

	width:100%;

	height:480px;

}

.mapaGrande {

	width:100%;

	height:680px;

}

.mapa-menor {

    width:200px;

    height:60px;

}

.container {

    margin-left: auto;

    margin-right: auto;

    padding-left: 4em;

    padding-right: 4em;

}

#itens-mala {

	left:20px;

	font-weight:bolder;

	font-size:16px;

	position:absolute;

	color:#000;

	padding:5px;

}

.div-descricao-busca {

	background-color: #f8f8f8;

	margin-bottom: 15px;

	padding: 10px;

}

.div-descricao-busca-pax {

	min-width:110px;

	float:right;

	background-color: #fff;

	color:#05355f;

	border: 1px solid #ccc;

	border-radius: 5%;

	padding:10px;

}

.titulo-buscador {

    display: none;

    text-align: center;

    font-size:20px;

}

.divLead {

	width:280px;

	float: left;

	margin-right: 20px;

}



.dropdown-menu {

  padding: 10px;

}



.divChat {

	overflow-y:auto;

	max-height: 300px;

	padding: 10px;	

	margin-bottom: 20px;

	background-color: #f7f7f7;

	border:1px solid #eee;

}



.chat li {

	width:98%;

}

.chat li .chat-body p {

	margin: 10px;

}



.chat li.right .chat-body {

    margin-right: 80px!important;

}



.mate {

    min-width: 40px;

    height: 180px;

    border: 1px solid #ccc;

    overflow: hidden;

    margin-bottom: 10px;



    position: relative;

}



.runner, .runner div {

    width: 100%;

    overflow: hidden;

    position: absolute;

}



.runner {

    border: 1px solid #afc92e;

    border-top-width: 0;

    background-color: #afc92e;

    

    bottom: 0;

    height: 0%;

}



.runner label {

	text-align: center;

	padding: 5px;

	width:100%;

	font-weight: bolder;

	font-size: 15px;

	color: #1f876e;

}



.runner div {

    border: 1px solid #1f876e;

    border-bottom-width: 0;

    background-color: #1f876e;

    

    top: 0;

    width: 100%;

    height: 2px;

}



.overlay-disabled {

  	background: rgba(0, 0, 0, .75);

   	height: 100%;

  	width: 100%;

  	top: 10%;

  	left: 0;

  	position: absolute;

  	z-index:100000;

}



.txt-carregando {

    margin-top:20px;

    text-align: center;

    color: #333333;

    text-shadow: 1px 1px #f4811e;

    font-size: 20px;

    padding:10px;

}



.steps {

  list-style-type: none;

  padding: 0;

}

.steps li {

  display: inline-block;

  margin-bottom: 3px;

  width: 16.4%;

  text-align: center;

}

@media(max-width:1200px) {

	.steps li {

		width: 15%;

	}

}

.steps li a, .steps li p {

  background: #ccc;

  padding: 8px 20px;

  color: #333;

  display: block;

  font-size: 14px;

  font-weight: bold;

  position: relative;

  text-indent: 12px;

  white-space: nowrap;

}

.steps li a:hover, .steps li p:hover {

  text-decoration: none;

}

.steps li a:before, .steps li p:before {

  border-bottom: 18px solid transparent;

  border-left: 12px solid #fff;

  border-top: 18px solid transparent;

  content: "";

  height: 0;

  position: absolute;

  left: 0;

  top: 50%;

  width: 0;

  margin-top: -18px;

}

.steps li:first-child a:before, .steps li p:before {

	border-left: 12px solid #ccc;

}

.steps li a:after, .steps li p:after {

  border-bottom: 18px solid transparent;

  border-left: 12px solid #ccc;

  border-top: 18px solid transparent;

  content: "";

  height: 0;

  position: absolute;

  /*right: -12px;*/

  left:100%;

  top: 50%;

  width: 0;

  margin-top: -18px;

  z-index: 1;

}

.steps li.active a, .steps li.active p {

  background: #404040;

  color: #fff;

}

.steps li.active a:after, .steps li.active p:after {

  border-left: 12px solid #404040;

}

.steps li.undone a, .steps li.undone p {

  background: #b7b7b7;

  color: #ddd;

}

.steps li.undone a:after, .steps li.undone p:after {

  border-left: 12px solid #b7b7b7;

}

.steps li.undone p {

  color: #aaa;

}

.steps-order {

	display: none;

}

@media(max-width:768px) {

	.steps-order {

		display: block;

	}

	.steps-legend {

		display: none;

	}

}



.breadcrumbcrm {

	display: flex;

	border-radius: 5px;

	overflow: hidden;

	text-align: center;

	width: 100%;

	height: 170px;

	border: 1px solid #ccc;

	z-index: 1;

	background-color: #f5f5f5;

	font-size: 14px;

}



.breadcrumbcrm a {

	text-decoration: none;

}



.breadcrumbcrm i-status {

	position: relative;

	display: flex;

	flex-grow: 1;	

	margin: auto;

	height: 100%;

	width: 16%;

	padding-left: 18px;

	padding-right: 0;

	color: #666;

}



.breadcrumbcrm i-status:first-child {

	padding-left: 15px;

}



.breadcrumbcrm i-status:last-child {

	padding-right: 15px;

}



.breadcrumbcrm i-status:after {

	content: "";

	position: absolute;

	display: inline-block;

	width: 150px;

	height: 150px;

	top: 10px;

	right: -28.15px;

	background-color: #f5f5f5;

	border-top-right-radius: 5px;

	transform: scale(0.707) rotate(45deg);

	box-shadow: 1px -1px #cccccc;;

	z-index: 1;

}



.breadcrumbcrm i-status:last-child:after {

	content: none;

}



.breadcrumbcrm__inner {

	display: flex;

	flex-direction: column;

	margin: auto;

	z-index: 2;

}



.breadcrumbcrm a.active, .breadcrumbcrm a:hover{

	color: #aaa;

}



.borderless td, .borderless th {

    border: none;

    border-top: none!important;

}



@media all and (max-width: 1000px) {

	.breadcrumbcrm {

		font-size: 12px;

	}

}



@media all and (max-width: 710px) {

	.breadcrumbcrm__desc {

		display: none;

	}

	

	.breadcrumbcrm {

		height: 38px;

	}

	

	.breadcrumbcrm a {

		padding-left: 25px;

	}

	

	.breadcrumbcrm a:after {

		content: "";

		width: 38px;

		height: 38px;

		right: -19px;

		transform: scale(0.707) rotate(45deg);

	}

}



#star-rating{

	display: flex;

	gap: 15px;

}

.star {

	font-size: 2em;

	cursor: pointer;

	color: gray;

	width: 35px !important;

	height: 35px;

	display: flex;

	align-items:center;

	justify-content: center;

}

.star.selected {

	color: <?php echo Config::get('application.corpredominante1'); ?>;

	border-radius: 50%;

}



.star-container {

  position: relative;

  display: inline-block;

}



.main-star {

	font-size: 20px; 

	color: #333333;

	position: relative;

}



.small-star {

	position: absolute;

	font-size: 10px; 

	color: <?php echo Config::get('application.corpredominante1'); ?>;

	opacity: 0; 

	animation: star-animation 1s ease-out infinite;

}



.small-star-1 {

	top: 0;

	left: 50%;

	transform: translateX(-50%);

	animation-delay: 0s;

}



.small-star-2 {

	top: 50%;

	left: 100%;

	transform: translateY(-50%);

	animation-delay: 0.3s;

}



.small-star-3 {

	top: 100%;

	left: 50%;

	transform: translate(-50%, -100%);

	animation-delay: 0.6s;

}



@keyframes star-animation {

	0% {

		transform: scale(0) translate(0, 0);

		opacity: 1;

	}

	50% {

		opacity: 1;

	}

	100% {

		transform: scale(1) translate(30px, -30px); 

		opacity: 0;

	}

}



/**  Modal **/



div.dataTables_wrapper div.dataTables_filter input {

    border: 1px solid #bbb;

    padding: 5px;

}



.select2-container--default .select2-selection--single {

    height: 34px;

    border: 1px solid #CCC !important;

}

.select2-container--default .select2-selection--single .select2-selection__rendered {

    line-height: 32px !important;

    color: #999 !important;

}

.select2-container--default .select2-selection--single .select2-selection__arrow {

    top: 5px !important;

}

/**  Modal **/



.modal-header {

	background-color: whitesmoke;

	color:#570250;

}

.modal-footer {

	background-color: whitesmoke;

}

.modal-marca {

	float:left;

	margin-right:10px;

	padding-right: 10px;

    border-right: 1px solid #ccc;

}

.modal-marca img  {

	margin-top: -5px;

}

#content-modal {

    background: none repeat scroll 0 0 #fff;

    margin-right: 0;

    padding-top: 10px;

    min-height: 450px;

    width: auto;

}

.modal-iframe{

	border: 0;

	width: 580px;

	height: 450px;

}

.modal-iframe-pequena{

	border: 0;

	width: 580px;

	height: 300px;

}

.modal-iframe-grande{

	border: 0;

	width: 100%;

	height: 500px;

}

.janelaModal{

	width: 600px;

}

.janelaModalPequena{

	width: 600px;

}

.janelaModalGrande{

	width: 90%;

}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {

    vertical-align: middle;

   }



/* Ajuste Gerais */

.navbar-top-links li:last-child {

    margin-right: 0px;

}

.page-header {

    padding-bottom: 9px;

    margin: 20px 0 -10px 0;

    border: 0;

}

.panel-actions {

	padding:0 0 20px 20px;

}

.panel-border {

	border-left:1px solid #ddd;

	border-right:1px solid #ddd;

	border-bottom:1px solid #ddd;

	padding:20px;

}

.form-horizontal .controls {

    margin-left: 180px;

}



.lista-estrelas {

    display: inline-block;

    list-style: none;

    margin: 5px 0 10px 10px;

    padding: 0;

    overflow: hidden;

    vertical-align: middle;

}

.lista-estrelas > li {

    float: left;

    margin-right: 5px;

}



/* Breadcrumb */

#breadcrumb {

    margin-bottom: 20px;

	background-color: #f8f8f8;

	border: 1px solid #d6d6d6;

	padding-left: 10px;

}

#breadcrumb a {

	padding: 8px 10px 8px 0;

	display: inline-block;

	background-position: center right;

	background-repeat: no-repeat;

	color: #666666;

}

#breadcrumb a:hover {

	color: #333333;

}

#breadcrumb a:last-child {

	background-image:none;

}

#breadcrumb a.current {

	font-weight: bold;

	color: #444444;

}

#breadcrumb a i {

	margin-right: 5px;

	opacity: .6;

}

#breadcrumb a:hover i {

	margin-right: 5px;

	opacity: .8;

}





/* Calendar */



.fc-past {

	background-color:#ccc;

	opacity:0.3;

}



/* Preloader */



#preloader {

	display:none;

	background: #FFF;

	bottom: 0;

	left: 0;

	position: fixed;

	right: 0;

	top: 0;

	z-index: 9999;

}



#status {

	background-position: center;

	background-repeat: no-repeat;

	height: 200px;

	left: 50%;

	margin: -100px 0 0 -100px;

	position: absolute;

	top: 50%;

	width: 200px;

}



/* Tablets */

@media(max-width:900px) {

	.sidebar {

		width:160px !important;

	}

	#page-wrapper {

		margin: 0 0 0 160px !important;

	}

}

/* Tablets */



/* Tablets */

@media(max-width:768px) {

	.sidebar {

		width:100% !important;

	}

	#page-wrapper {

		margin:0px !important;

	}

	.logoLogin {

    	margin:0 auto;

    	text-align:center;

	}

    .brand img {

		width:180px;

    }

    .logo {

    	margin:0px;

    	margin-left:5px;

    	width:100px;

    }

    .btn span {

    	display:none;

    }

    div.dataTables_length {

    	text-align:left;

    }

    div.dataTables_filter {

    	text-align:left;

    }

	.checkbox-inline, .radio-inline {

		display:flex;

		margin-left: 10px;

	}

	.clock {

		display:none;

	}

}



/* Celular */

@media(max-width:380px) {

	.checkbox-inline, .radio-inline {

		display:flex;

		margin-left: 10px;

	}

	.clock {

		display:none !important;

	}

	.container {

		padding-left: 10px!important;

		padding-right: 10px!important;

	}

	.modal-iframe{

		border: 0;

		width: 100%;

		height: 500px;

	}

	.janelaModal{

		width: 100%;

	}

	.nav-tabs>li>a span {

	    display: none;

	}

	.titulo-buscador {

	    display: block;

	}

}



.div-circle-pequena {

  background-color: #fff;

  color:#00bfd8;

  padding: 5px;

  border-radius: 50%;

  font-size: 20px;

  font-weight: 700; 

  line-height: 1.5em;

  width: 40px;

  height: 40px;

}



.dashboard-progress {

	width: 100%;

	padding: 0px;

	margin:0px;

	height: 20px;

    -webkit-appearance: none;

}

.dashboard-progress-login {

	width: 100%;

	padding: 0px;

	margin:0px;

	height: 20px;

    -webkit-appearance: none;

}



::-webkit-progress-bar {

  background-color: #ccc;

}

.dashboard-progress::-webkit-progress-value {

  background-color: green;

}



.dashboard-progress::-moz-progress-bar {

  background-color: green;

}

.dashboard-progress-login::-webkit-progress-value {

  background-color: blue;

}



.dashboard-progress-login::-moz-progress-bar {

  background-color: blue;

}





.sidebar-progress {

	width: 100%;

	padding: 0px;

	margin:0px;

	height: 10px;

    background-color: #fff;

}



.sidebar-progress-xp {

	width: 100%;

	padding: 0px;

	margin:0px;

	height: 50px;

	margin-top: 5px;

    background-color: #fff;

}



.whatsapp-status {

  width: 10px;

  height: 10px;

  background-color: #adb5bd;

  border-radius: 50%;

  border: 2px solid #fff;

  position: absolute;

  right: 7px;

  left: auto;

  bottom: 12px;

}



#lista-cambio {

	padding: 10px 5px 0 15px;

	width:1500px;

}



#divCambio::-webkit-scrollbar

{

	height: 5px;

}



#divCambio::-webkit-scrollbar-track

{

	-webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);

}



#divCambio::-webkit-scrollbar-thumb {

  height: 5px;

  background-color: #555;

  border-radius: 5px;

}



#divCambio::-webkit-scrollbar-thumb:hover {

  background-color: #f1db9d;

}



#divCambio::-webkit-scrollbar:vertical {

  display: none;

}



.table-tarifario thead tr {

  display: block;

  position: relative;

}

.table-tarifario th,

.table-tarifario td {

  width:170px;

}

.table-tarifario td:nth-child(17),

.table-tarifario th:nth-child(17) {

  width: 170px;

}

.table-tarifario td:nth-child(1),

.table-tarifario th:nth-child(1) {

  width: 250px;

}

.table-tarifario tbody {

  display: block;

  overflow: auto;

  width: 100%;

  height: 390px;

} 



.tabs-left, .tabs-right {

  border-bottom: none;

  padding-top: 2px;

}

.tabs-left {

  border-right: 1px solid #ddd;

}

.tabs-right {

  border-left: 1px solid #ddd;

}

.tabs-left>li, .tabs-right>li {

  float: none;

  margin-bottom: 2px;

}

.tabs-left>li {

  margin-right: -1px;

}

.tabs-right>li {

  margin-left: -1px;

}

.tabs-left>li.active>a,

.tabs-left>li.active>a:hover,

.tabs-left>li.active>a:focus {

  border-bottom-color: #ddd;

  border-right-color: transparent;

  background: #f8f8f8;

}



.tabs-right>li.active>a,

.tabs-right>li.active>a:hover,

.tabs-right>li.active>a:focus {

  border-bottom: 1px solid #ddd;

  border-left-color: transparent;

  background: #f8f8f8;

}

.tabs-left>li>a {

  border-radius: 4px 0 0 4px;

  margin-right: 0;

  display:block;

  font-size: 15px;

}

.tabs-right>li>a {

  border-radius: 0 4px 4px 0;

  margin-right: 0;

}

.vertical-text {

  margin-top:50px;

  border: none;

  position: relative;

}

.vertical-text>li {

  height: 20px;

  width: 120px;

  margin-bottom: 100px;

}

.vertical-text>li>a {

  border-bottom: 1px solid #ddd;

  border-right-color: transparent;

  text-align: center;

  border-radius: 4px 4px 0px 0px;

}

.vertical-text>li.active>a,

.vertical-text>li.active>a:hover,

.vertical-text>li.active>a:focus {

  border-bottom-color: transparent;

  border-right-color: #ddd;

  border-left-color: #ddd;

}

.vertical-text.tabs-left {

  left: -50px;

}

.vertical-text.tabs-right {

  right: -50px;

}

.vertical-text.tabs-right>li {

  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -ms-transform: rotate(90deg);

  -o-transform: rotate(90deg);

  transform: rotate(90deg);

}

.vertical-text.tabs-left>li {

  -webkit-transform: rotate(-90deg);

  -moz-transform: rotate(-90deg);

  -ms-transform: rotate(-90deg);

  -o-transform: rotate(-90deg);

  transform: rotate(-90deg);

}



.btn-colapse-sidebar{  

	-moz-transition: all 0.2s linear;

    -webkit-transition: all 0.2s linear;

    transition: all 0.2s linear;

    padding-top: 13px;

    display: table-cell;

    cursor: pointer;

}



.rotate-sidebar{

    -moz-transition: all 0.2s linear;

    -webkit-transition: all 0.2s linear;

    transition: all 0.2s linear;

}



.rotate-sidebar.rleft{

    -ms-transform: rotate(180deg);

    -moz-transform: rotate(180deg);

    -webkit-transform: rotate(180deg);

    transform: rotate(180deg);

}



.rotate-sidebar.rright{

    -ms-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

}



@media(max-width:768px) {

	.btn-colapse-sidebar{  

		display: none;

	}

}



@media(max-width:900px) {

	.btn-colapse-sidebar{  

		display: none;

	}

}



@media(max-width:380px) {

	.btn-colapse-sidebar{  

		display: none;

	}

	.logo-topo {

		margin-left: 50px !important;

	}

}



.timeline-noborder:before {

	background-color: transparent!important;

}



.timeline > li > .timeline-date {

    z-index: 100;

    position: absolute;

    top: 16px;

    left: 50%;

    width: 100px;

    height: 30px;

    margin-left: -50px;

    margin-top: -30px;

    border-radius: 5%;

    text-align: center;

    font-size: 1em;

    line-height: 30px;

    color: #fff;

    font-weight: bolder;

    background-color: #999999;

}



.timeline-noborder > li > .timeline-panel:after {

	display: none;

}

.timeline-noborder > li > .timeline-panel:before {

	display: none;

}



.protocolo-slide {

    height: 500px;

    overflow-y: scroll;

}



.card-profile .picture {

    width: 200px;

    height: 200px;

    background-color: #999999;

    border: 4px solid #CCCCCC;

    color: #FFFFFF;

    border-radius: 50%;

    margin: 5px auto;

    overflow: hidden;

    transition: all 0.2s;

    -webkit-transition: all 0.2s;

}



.card-profile .picture-menor {

    width: 100px;

    height: 100px;

    background-color: #999999;

    border: 4px solid #CCCCCC;

    color: #FFFFFF;

    border-radius: 50%;

    margin: 5px auto;

    overflow: hidden;

    transition: all 0.2s;

    -webkit-transition: all 0.2s;

}



.card-profile .picture-src {

    width: 100%;

    height: 100%;

}



.card-profile .picture input[type="file"] {

    cursor: pointer;

    display: block;

    height: 100%;

    left: 0;

    opacity: 0 !important;

    position: absolute;

    top: 0;

    width: 100%;

}





.lbCheckbox {

  display: block;

  position: relative;

  padding-left: 35px;

  margin-bottom: 12px;

  cursor: pointer;

  font-size: 16px;

  font-weight: 400;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



.lbCheckbox-menor {

  margin-bottom: 5px;

  font-size: 13px;

}



/* Hide the browser's default checkbox */

.lbCheckbox input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}



/* Create a custom checkbox */

.checkmark {

  position: absolute;

  top: 0;

  left: 0;

  height: 25px;

  width: 25px;

  background-color: #c1c1c1;

}



.checkmark-menor {

  height: 20px;

  width: 20px;

}



/* On mouse-over, add a grey background color */

.lbCheckbox:hover input ~ .checkmark {

  background-color: #ccc;

}



/* When the checkbox is checked, add a blue background */

.lbCheckbox input:checked ~ .checkmark {

  background-color: #454545;

}



/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



/* Show the checkmark when checked */

.lbCheckbox input:checked ~ .checkmark:after {

  display: block;

}



/* Style the checkmark/indicator */

.lbCheckbox .checkmark:after {

  left: 9px;

  top: 5px;

  width: 5px;

  height: 10px;

  border: solid white;

  border-width: 0 3px 3px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}



.lbCheckbox-menor .checkmark:after {

  left: 7px;

  height: 8px;

}



.market-spread {

    font-size: 10px;

    color:#aaa; 

}



/* common */

.ribbon {

  width: 150px;

  height: 150px;

  overflow: hidden;

  position: absolute;

}

.ribbon::before,

.ribbon::after {

  position: absolute;

  z-index: -1;

  content: '';

  display: block;

  border: 5px solid #2980b9;

}

.ribbon span {

  position: absolute;

  display: block;

  width: 225px;

  padding: 15px 0;

  background-color: #3498db;

  box-shadow: 0 5px 10px rgba(0,0,0,.1);

  color: #fff;

  font: 700 18px/1 'Lato', sans-serif;

  text-shadow: 0 1px 1px rgba(0,0,0,.2);

  text-transform: uppercase;

  text-align: center;

}



/* top left*/

.ribbon-top-left {

  top: -10px;

  left: -10px;

}

.ribbon-top-left::before,

.ribbon-top-left::after {

  border-top-color: transparent;

  border-left-color: transparent;

}

.ribbon-top-left::before {

  top: 0;

  right: 0;

}

.ribbon-top-left::after {

  bottom: 0;

  left: 0;

}

.ribbon-top-left span {

  right: -25px;

  top: 30px;

  transform: rotate(-45deg);

}



/* top right*/

.ribbon-top-right {

  top: -10px;

  right: -10px;

}

.ribbon-top-right::before,

.ribbon-top-right::after {

  border-top-color: transparent;

  border-right-color: transparent;

}

.ribbon-top-right::before {

  top: 0;

  left: 0;

}

.ribbon-top-right::after {

  bottom: 0;

  right: 0;

}

.ribbon-top-right span {

  left: -25px;

  top: 30px;

  transform: rotate(45deg);

}



/* bottom left*/

.ribbon-bottom-left {

  bottom: -10px;

  left: -10px;

}

.ribbon-bottom-left::before,

.ribbon-bottom-left::after {

  border-bottom-color: transparent;

  border-left-color: transparent;

}

.ribbon-bottom-left::before {

  bottom: 0;

  right: 0;

}

.ribbon-bottom-left::after {

  top: 0;

  left: 0;

}

.ribbon-bottom-left span {

  right: -25px;

  bottom: 30px;

  transform: rotate(225deg);

}



/* bottom right*/

.ribbon-bottom-right {

  bottom: -10px;

  right: -10px;

}

.ribbon-bottom-right::before,

.ribbon-bottom-right::after {

  border-bottom-color: transparent;

  border-right-color: transparent;

}

.ribbon-bottom-right::before {

  bottom: 0;

  left: 0;

}

.ribbon-bottom-right::after {

  top: 0;

  right: 0;

}

.ribbon-bottom-right span {

  left: -25px;

  bottom: 30px;

  transform: rotate(-225deg);

}