nodebb-theme-exodus/less/exodus.less

Custom Persona theme for NodeBB by Exodo

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

/* -------------------------------------- HEADER ----------------------------------------*/

//main margin and padding
.row {
		margin-left: 0px;
		margin-right: 0px;
}

@media (min-width: @screen-xs-max){ // no mobile 767px
	.navbar > div{
		margin-left: 20px;
		margin-right: 20px;
	}
	#content  {
		//margin-left: 20px;
		//margin-right: 20px;
		padding-top: 10px;
	}
}

@media (max-width: @screen-xs-max){ //mobile 767px
	.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
	}
	#content  {
		margin-left: 0px;
		margin-right: 0px;
	}
	.categories-div, .topic, .category {
		padding-left: 0px;
		padding-right: 0px;
	}
}

/*
@media (min-width: 2000px){ //mega pantallas
	.navbar > div{
		margin-left: 40px;
		margin-right: 40px;
	}
	#content  {
		margin-left: 80px;
		margin-right: 80px;
		padding-top: 10px;
	}
}
*/

.recent, .unread-div , .popular{
	@media (min-width: @screen-xs-max){ //no mobile
		padding-left: 15px;
		padding-right: 15px;
	}
}
// navbar colors
.header {
	background-color: @navbar-bg;
}

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav .btn-link, .navbar-default  .pagination-block i {
	color: @navbar-icon;
}

.navbar-default	.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default	.navbar-nav .btn-link:hover ,
 .pagination-block i.fa:hover, .pagination-block i.fa:focus{
	color: @navbar-hover;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	background-color: @navbar-icon;
}

// mobile toogle
.navbar-default .navbar-toggle {
	border: inherit;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: inherit;
	.icon-bar {
		background-color: @navbar-hover;
	}
}

//titulo de hilos

[component="navbar/title"] {
	text-align: center;
	font-style: italic;
	padding: 15px 15px;
	font-size: 13px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
		span {
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #8d8d8d;
		}
	}

// logo by exodo
.header .forum-logo {
	margin-top: 15px;
	margin-right: 5px;
	width: 107px;
	height: 20px;
	margin-left: -6px;
	@media (max-width: @screen-xs-max){
			margin-left: 20px;
	}
}

.header .navbar-toggle .notification-icon {
    top: 16px;  //vertical align
}

//sin margen en notificaciones para que sea mas homogeneo en el hover
.header .notification-list li{
	margin: 0px;
}
// y en los chats
#menu .chat-list li, .header .chat-list li {
	width: 300px;
	margin: 0px;
}


/* -------------------------------------- STYLE ----------------------------------------*/


body {
	background: @bg-color;
	font-family: @exodo-font-family;
	font-size: 13px;
}

a {
	color: @primary;
}
a:hover, a:focus {
	color: black; //cambiar
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: bold;
}

.breadcrumb { padding-left: 15px; padding-right: 15px; }

.btn-toolbar { padding-left: 10px; padding-right: 5px; }



//@color-fondo: #2e3539;
@color-fondo: @topic-header;
@color-linea: #cf246a;
@speed: 0.20s;
@transition: all @speed ease;


//añadimos el hover que ya hace boostrap a mas elementos para que sea homogeneo
#header-menu .dropdown-menu>li>ul>li:hover{
color: #262626 !important;
background-color: #f5f5f5 !important;
	a {
		color: #262626 !important;
	}
}
#user-control-list li:hover a{
		color: #262626 !important;;
}
.chats > ul > li:nth-child(2):hover a, .chats > ul > li:nth-child(3):hover a{
	color: #262626 !important;;
}
.notifications > ul > li:nth-child(2):hover a, .notifications > ul > li:nth-child(3):hover a{
	color: #262626 !important;;
}
#content .dropdown-menu>li:hover a{
	color: #262626 !important;
}

//quitamos decoraciones
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
	outline: none;
}
a:focus, a:hover {
	outline: none !important;
	text-decoration: none !important;
}


//exodus button
.btn-default, .btn-primary, .btn-warning, .btn-danger, .btn-info {

	//width: auto;
	height: 27px;
	line-height: 27px !important;
	margin: auto;
	color: #fff;
	padding: 0 5px 0 5px !important;
  cursor: pointer;
	overflow: hidden;
	border-radius: 0px;
	font-size: 13px !important;
	vertical-align: middle;
	background-color: @color-fondo !important;
  border-left: 5px solid @color-linea !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-right: 0 !important;

  span, a {
		color: inherit;
		line-height: inherit;
	  font-size: 13px;
	}

  .fa {
    line-height: inherit;
	  vertical-align:middle;;
	  min-width: 25px;
	  font-size: 16px;
		//margin-top: -3px;
  }

  &:hover , &:focus{
		z-index: auto !important;
		color: #fff;
		//box-shadow: 0 0 0 2px #e4e4e4;
		text-decoration: none;
		box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14);
		//color: lighten (#fff ,50%);
	}

}

//boostrap want to keep button text on black
.open > .dropdown-toggle.btn-default {
	color: #fff;
}

//composer caret color
.composer .dropdown-toggle .caret{
	background-color: @color-fondo !important;
	color: #fff;
	&:hover, &:focus{
		background-color: @color-fondo !important;
	}
}

//navpills

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
	background-color: @primary;
}


//progress bar
.progress-bar {
//background-color: @primary !important;
}
.topic .pagination-block .wrapper {
    padding: 3px 0px;
}

.unread {
	.btn-toolbar {
    margin-top: 50px;
    padding-bottom: 10px;
	}
}

//tags
.tag-topic-count {
	color: @primary;
}

//pagination default
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
	background-color: @primary;
	border-color: @primary;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
	color: @primary;
}
.pagination>li>a {
	color: @primary;
}


//fix for chat list PR it
.chats-list>li .main-avatar {
	top: -1px !important;
}


//do no write area below 16px for no zoom on IOS
.form-control { font-size: 16px; }

/* -------------------------------------- TOPIC ----------------------------------------*/




.btn-xs {
font-size: 12px !important;
line-height: 1.5 !important;
background-color: #fff; //cambiar blanco a variable
}
@media (max-width: @screen-xs-max){
	.topic {
	padding-left: 8px;
	padding-right: 8px;
	}
}
.topic h1 {
	text-align: center;
	color: @primary;
	margin-top: 5px;
	margin-bottom: 5px;

	.topic-title {
		display: inline-block;
		padding-bottom: 10px;
		@media (max-width: @screen-xs-max){
			font-size: 17px;
		}
	}
	.topic-title:first-letter{
		text-transform: uppercase;
	}
}

.topic a.permalink {
	color: @primary;
	text-decoration: none;
}
.topic a.permalink:hover, .topic a.permalink:focus, .topic a.permalink:active {
	color: black; //cambiar
	text-decoration: none;
}
.topic .posts .icon {
	margin-top: 0px !important;
}
.topic .posts .icon img, .topic .posts .icon .user-icon {
	float: none;
	padding: 0;
	border-radius: 0;
	border: 0 solid;
	min-height: 128px;
	min-width: 128px;
	height: 128px;
	width: 128px;
	margin-top: 0px;
	margin-right: 0px;
	background: #fff;
}

.topic .posts .post-header{
	background: @topic-header;
	display: block;
	line-height: 30px;
	width: 100%;

	.username a {
		font-size: 15px;
		color: @topic-header-text;
		cursor: pointer;
		font-weight: normal;
		word-wrap: break-word;
		padding-left: 5px;
	}
}

//toPID button
[component="post/parent"] {
	float:right;
	font-size: 11px !important;
	background-color: @topic-details !important;
  	border-left: none !important;
	color: black;
  	.fa {
	    font-size: 13px;
	}
  	&:hover , &:focus{

		color: black !important;
		box-shadow: 0 0 0 2px #e4e4e4;
		text-decoration: none;
  	}
}

.topic .box {
	background-color: @topic-details;
	background-image: @pattern;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	border-right: 1px solid @topic-border;
	border-left: 1px solid @topic-border;
}

.topic .post-details {
	//float: left;
	text-align: center;
	background-color: @topic-details;
	background-image: @pattern;
}

.topic .right-content {
	font-size: 10pt;
	//display: flex;
	flex-direction: column;
	flex: 1 0;
	word-break: break-word;
}
.topic .content {

	flex: 1 0;
	padding: 15px 15px 0px 15px;
	margin-top: 0px !important;
	margin-left: 0px !important;
	background-color: @topic-content;
	//border-right: 1px solid @topic-border;
	@media (min-width: @screen-xs-max /*  767px*/) {min-height: 128px;}
	//@media (max-width: @screen-xs-max /*  767px*/) {border-left: 1px solid @topic-border;}

}
.topic .time {
	padding: 5px 15px 5px 5px;
	text-align: right;
	margin-left: 0px;
	font-size: 13px;
}
.topic .post-signature {
	display: block;
	max-height: 50px;
  line-height: 20px;
	overflow: hidden;
	margin-left: 0px;
	padding-left: 15px;
	padding-right: 15px;
}
.topic .sub-content {
	background-color: @topic-content;
	//min-height: 70px;
	//@media (min-width: @screen-xs-max /*  767px*/) {margin-left: 128px;}
	//@media (max-width: @screen-xs-max /*  767px*/) {border-left: 1px solid @topic-border;}
	//border-right: 1px solid @topic-border;
}

.topic .posts .links-bar small{

	background-color: @topic-details;
	display: block;
	line-height: 30px;
	//min-height: 30px;
	width: 100% !important;
	text-align: right;
	background-image: @pattern;
}

.topic .posts .links-bar a {
	color: @topic-links;
	font-size: 12px;
}

.topic .posts .links-bar {
	border-right: 1px solid @topic-border;
	border-left: 1px solid @topic-border;
	border-bottom: 1px solid @topic-border;
}

.topic .index {
	top: 0px;
	position: absolute;
	right: 10px;
	font-size: 13px;
	color: @topic-header-text;
}
.topic .votes {
	padding-right: 10px;

	a {
		padding: 10px;
	}
}
.topic .moderator-tools {
	margin-left: 1px;
}

.group-badge{
	padding: 5px;
}

//bookmark HR easeinout
.topic hr {
	margin-top: 0px;
	margin-bottom: 0px;
	border-top: 3px solid transparent;
}

//deleted posts
.topic .posts >li.deleted .box {

	.post-details { opacity: 0.5;
			.userinfo-extra {
				display:none;
			}
	}
	.content {
		background-color: @topic-details;
		opacity: 0.5;
	}
	.sub-content {display: none; }
	.group-badge { display: none; }
}

.topic .posts .content pre code {
    white-space: pre-line !important;
}

[component="post/replies"] {
	margin-left: 60px !important;
	margin-top: 0px !important;
		@media (max-width: @screen-xs-max /*  767px*/)
		{
			margin-left: 3px;
		}
	.post-header {
		display: none;
	}
	.post-details {
		display: none;
	}
	.reactions-div{
		display:none;
	}
}

.topic [component="post/reply-count"]{
	margin-left: 10px;
}
.topic [component="post/reply-count/text"]{
		font-size: 14px;
}
//inline replies small
.replies {text-align: left !important;}

.quick-reply {
        margin-top: 20px;

        .reply-user {
            text-align: center;

            a {
                display: inline-block;

                .user-avatar {
                    .user-avatar(80px);
                }

                .user-icon {
                    .user-icon(80px, 4em);
                }
            }

            .author {
                margin-top: 10px;
            }
        }

        button {
            float: right;
            display: block;
            margin: 10px 15px 10px 0;
        }
    }

//reaction emojis
.reacted img { height: 20px !important; }
.reactions-div { padding-top: 5px; }
.reactions .reaction-add { font-size: 15px}

//emoji modal size fix
#emoji-aaexodo .emoji[data-set-id="exodo"] { height: 20px;}

/* -------------------------------------- CATEGORY ----------------------------------------*/

.category>ul>li:not(.unread) h2 a:hover {color: @primary;} //cambiar
.category>ul {.unread h2 small a {color: #555;}} //keep unread in black
.category>ul {.unread h2 small a:hover {color: @primary;}}

.category>ul>li .fa-stack {
    font-size: 100%;
}

.category {

	.topic-list {
		margin-top: 0px;
	}

	> ul {

		> li {
			padding-top: 0px;
			padding-bottom: 0px;
			min-height: 42px;
			border-top: 1px solid #ddd  !important;
			border-left: 1px solid #ddd ;
			border-right: 1px solid #ddd ;
			list-style: none;
			background-color: #fafafa; //cambiar

			.teaser {
				//width: 30%;
				.card {
					height: 31px;
					padding-top: 3px;

					.post-content {
						font-size:11px;
					}
				}
			}

			.select .fa-check {
    		padding: 9px !important;
			}

			.content {

				@media (max-width: @screen-xs-max){
					padding-left: 5px;
					padding-right: 0px;
				}

				padding-left: 15px;
				padding-right: 10px;


				h2 {
					margin-left: 45px;
					line-height: 15px;
					padding-top: 5px;
					padding-bottom: 5px;

					.topictitle {
						a {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						line-height: 16px;     /* fallback */
						max-height: 32px;      /* fallback */
						-webkit-line-clamp: 2; /* number of lines to show */
						-webkit-box-orient: vertical;

						}
					}
					small {
						@media (max-width: 767px){
							.visible-xs-inline {
    						display: inline-block !important;
							}
						}
					}
					a {
						font-size: 13px;
						line-height: 10px;
						padding-bottom: 2px;
					}
				}

				.avatar {
				padding-top: 4px;

				.user-icon,.user-img {
					width: 35px;
					height: 35px;
					line-height: 35px;
					margin-right: 0px;
					}
				}

				.icon {
					min-width: 40px;
					min-height: 40px;
					margin-top: 3px
				}
			}
			&:last-child {
				border-bottom: 1px solid #ddd !important;
			}

			.mobile-stat {
						padding-right: 5px;
						padding-top: 12px;
			}
		}
	}


	.category-bar {
		background: @topic-header;
		display: block;
		line-height: 30px;
		width: auto;
		//margin-left: -15px;
		//margin-right: -15px;

		p {
			color: #fff; //cambiar
			margin: 0;
			text-align: center;
			font-size: 15px;
		}
	}


	.stats {
		line-height: 15px;
		//padding-top: 5px;
		margin-top: 5px;
		font-size: 15px;
		//width: 5%;
		padding-right: 2px;
		padding-left: 2px;
		small {
			font-size: 12px;
		}

	}

[component="topic/pinned"]{
	font-size: 18px;
}

[component="topic/locked"]{
	font-size: 18px;
}

	#new-topics-alert {
		background-color: @primary;
    color: #fff;
		font-size: 12px;
		position: absolute;
		@media (max-width: @screen-xs-max){ //mobile
				margin-top: -40px;
		}
		margin-top: -80px;
		padding: 5px;
	}
}


/* -------------------------------------- CATEGORIES ----------------------------------------*/

.categories>li .content img, .category>ul>li .content img, .categories>li .content .user-icon, .category>ul>li .content .user-icon {
	border-radius: 20% !important;
}


.categories {

	> li {
		padding-top: 0px;
		padding-bottom: 0px;
		min-height: 52px;
		border-top: 1px solid #ddd  !important;
		border-left: 1px solid #ddd ;
		border-right: 1px solid #ddd ;
		list-style: none;
		background-color: #fafafa; //cambiar

		.teaser {
			//width: 30%;
			.card {
				height: 53px;
				margin-bottom: 3px;

				.post-content {
					font-size:11px;
				}
			}
		}

		.content {

			padding-left: 15px;
			padding-right: 10px;

			h2 {
				margin-left: 55px;
				line-height: 15px;
				padding-top: 5px;
				padding-bottom: 5px;
				a {
					font-size: 14px;
				}
			}

			.category-children a {
				font-size: 20px;
			}
			.category-children a:hover small{
				color: @primary;
			}

			.avatar {
			padding-top: 4px;

			.user-icon,.user-img {
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin-right: 0px;
				}
			}

			.icon {
				min-width: 46px;
				min-height: 46px;
				margin-top: 3px;
				i {
					vertical-align: middle;
					color: white; //cambiar
				}
			}

		}
		&:last-child {
			border-bottom: 1px solid #ddd !important;
		}

	}



	.stats {
		line-height: 15px;
		padding-top: 5px;
		margin-top: 5px;
		font-size: 15px;
		//width: 5%;
		padding-right: 2px;
		padding-left: 2px;
		small {
			font-size: 12px;
		}
	}

}

.subcategory .categories li {
	border-bottom: 1px solid #ddd !important;
}
.categories-bar {
	background: @topic-header;
	display: block;
	line-height: 30px;
	width: auto;
	//margin-left: -15px;
	//margin-right: -15px;

	p {
		color: #fff; //cambiar
		margin: 0;
		text-align: center;
		font-size: 15px;
	}
}


/* -------------------------------------- PAGINACION ----------------------------------------*/
//paginacion nueva de exodo
.example { margin: 5px auto 5px auto; }

.example button { background: transparent; border: 0; color: black; opacity: .5;}
.example button a { color:black;}
//.example button:hover, .example button:hover { opacity: 1; }
//.example button:disabled, .example button:disabled { opacity: .2; }

.example .forward, .example .backward { float: left;

	//width: 5%;
	height: 25px;
	line-height: 20px;
	font-size: 20px;
	padding: 2px 0px 3px 0px;
 }
.example .forward { float: right;
}

.example .frame { margin: 0 auto; width: 85%; height: 25px; line-height: 50px; overflow: hidden; text-shadow: none; }
.example .frame ul { list-style: none; margin: 0; padding: 0; height: 100%; font-size: 15px; }
.example .frame ul li { float: left; width: 50px; height: 100%; margin: 0 1px 0 0; background: #eee; text-align: center; cursor: pointer; }
.example .frame ul li.active { color: #fff; background: @primary; }
.example .frame ul li a { line-height: 25px; color: @topic-header; }
.example .frame ul li.active a { color: #fff; }
.example .frame ul li a:hover { color: @topic-header; }
.example .frame ul li.active a:hover { color: #fff }

.example .scrollbar { margin: 0 auto 2px; width: auto; height: 5px; line-height: 0; }
.example .scrollbar .handle { width: 100px; height: 50%; background: @topic-details; cursor: pointer; }
.example .scrollbar .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 50px; }

.example .pages { list-style: none; margin: 20px 0; padding: 0; text-align: center; }
.example .pages li { display: inline-block; width: 14px; height: 14px; margin: 0 4px; text-indent: -999px; border-radius: 10px; cursor: pointer; overflow: hidden;
	background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.example .pages li:hover { background: #aaa; }
.example .pages li.active { background: #666; }

.example .controls { margin: 0px 0 0; text-align: center; }
.example .controls .divider { display: inline-block; margin: 0 10px; }
.example .controls button { line-height: 32px; vertical-align: middle; font-family: Novecento, sans-serif; }
.example .controls button i { position: relative; top: -2px; margin: 0px; padding: 0; font-size: 32px; vertical-align: middle; }


/* -------------------------------------- MODULES ----------------------------------------*/
// modules/NPROGRESS
#nprogress .bar {
  	background: @primary
}
#nprogress .peg {
    box-shadow: 0 0 10px @primary, 0 0 5px @primary;
}
#nprogress .spinner-icon {
    border-top-color: @primary;
    border-left-color: @primary;
}

/* ------------------------------------COMPOSER -----------------------------------------------------*/

.category-list-container select {
	-moz-appearance: none;
	-webkit-appearance:none;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42ICBjMS43LTIuNSwyLjctNS41LDIuNy04LjdjMC04LjctNy40LTE1LjgtMTYuNi0xNS44djBIMTEyLjZ2MGMtOS4yLDAtMTYuNiw3LjEtMTYuNiwxNS44Qzk2LDE3OS4xLDk3LjEsMTgyLjIsOTguOSwxODQuN3oiLz48L3N2Zz4=);
	background-size: 16px;
	background-position: 97% 50%;
	background-repeat: no-repeat;
}
.composer-container .form-control {
	border: 1px solid #ccc;
}

html.composing.mobile .composer .title-container input.title {
	height: 30px !important;
}
.mobile-navbar {
    min-height: 20px !important;

		.category-name-container {
			padding: 5px 5px !important;
			//width: ~"calc(100% - 85px)" !important;
		}

		.composer-submit , .composer-discard {
			color: #fff !important;
			background-color: #337ab7 !important;
			border-color: #2e6da4 !important;
			padding: 0px !important;
			line-height: 1.5 !important;
			font-weight: normal !important;
			border-left: 0 !important;
			font-size: 20px !important;
			width: inherit !important;
			height: inherit !important;

			&:hover {
      background-color: #286090 !important;
      border-color: #204d74 !important;
			}

		}
}

@media (min-width: 767px) {
	.mobile-navbar > div {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}
}

/* -------------------------------------- SLIDEOUT ----------------------------------------*/


.cd-btn {

	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 100;
  //position: relative;
  display: inline-block;
  padding: 1em 2em;
  background-color: @topic-header;
  color: #ffffff;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: 50em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 1170px) {
  .cd-main-content h1 {
    //font-size: 32px;
    //font-size: 2rem;
  }
}



.bar {
	background: @topic-header;
	display: block;
	line-height: 30px;
	width: 100%;

	p {
		color: #fff; //cambiar
		margin: 0;
		text-align: center;
		font-size: 15px;
	}
}
.cd-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  -moz-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
}
.cd-panel::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  -moz-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
  -moz-animation: cd-close-1 0.6s 0.3s;
  animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
  -moz-animation: cd-close-2 0.6s 0.3s;
  animation: cd-close-2 0.6s 0.3s;
}

@-webkit-keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@-moz-keyframes cd-close-1 {
  0%, 50% {
    -moz-transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(45deg);
  }
}
@keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@-webkit-keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-45deg);
  }
}
@-moz-keyframes cd-close-2 {
  0%, 50% {
    -moz-transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(-45deg);
  }
}
@keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

.cd-panel-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  /* image replacement */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
  /* close icon created in CSS */
  position: absolute;
  top: 22px;
  left: 20px;
  height: 3px;
  width: 20px;
  background-color: #424f5c;
  /* this fixes a bug where pseudo elements are slighty off position */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-panel-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cd-panel-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
  background-color: #424f5c;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
  background-color: #ffffff;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  -ms-transform: rotate(220deg);
  -o-transform: rotate(220deg);
  transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.cd-panel-container {
  position: fixed;
  width: 90%;
  height: 100%;
  top: 0;
  background: #dbe2e9;
  z-index: 1;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.from-right .cd-panel-container {
  right: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
}
@media only screen and (min-width: 768px) {
  .cd-panel-container {
    width: 70%;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-panel-container {
    width: 50%;
  }
}

.cd-panel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 70px 5%;
  overflow: auto;
  color: black;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
  font-size: 14px;
  font-size: 0.875rem;
  color: #424f5c;
  line-height: 1.4;
  margin: 2em 0;
}
.cd-panel-content p:first-of-type {
  margin-top: 0;
}
@media only screen and (min-width: 768px) {
  .cd-panel-content p {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6;
  }
}