*{
	padding: 0;
	margin:0;
	font-family: sans-serif;
}

.clear{
	clear: both;
}

body{
	background: #f9f9f9;
}

/* login */
.login{
	background: rgb(59 130 246 / .1);
	height: 100vh;
}

.login .left{
	width: 50%;
	background: #ffffff;
	height: 100%;
	float: left;
	display: table;
}

.login .left .form-login{
	display: table-cell;
	vertical-align: middle;
}

.login .left .form-login .form-content{
	max-width: 350px;
	float: right;
	padding: 50px 50px 50px 50px;
}


@media(max-width:800px){
	.login .left{
		width: 90%;
		margin:auto;
		float: none;
		max-width: 420px;
		height: auto;
		padding: 20px 0;
		background: transparent;
	}

	.login .left .form-login{
		width: 100%;
		float: none;
		border-radius: 10px;
		border:solid 1px #1e293e10;
		background: #ffffff;
		box-shadow: 0 10px 30px #1e293e10;
	}
}

.login .left .form-login .logo-login{
	width: 50px;
	margin:0 0 20px 0;
}

.login .left .form-login .logo-login img{
	width: 100%;
}

.login .left .form-login h1{
	color: #1e293e;
	font-size:35px;
	margin:0 0 10px 0;
}


.login .left .form-login h2{
	color: #1e293e;
	font-size:15px;
	margin:0 0 10px 0;
}

.login .left .form-login h2 a{
	color: #2196F3;
	text-decoration: none;
}



.login .left .form-login form{
	margin:30px 0 0 0;
}

.login .left .form-login form p{
	margin:0 0 20px 0;
}

.login .left .form-login form p label{
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: #333333;
	margin:0 0 4px 0;
}

.login .left .form-login form input[type="email"],
.login .left .form-login form input[type="password"]{
	padding: 15px 2%;
	width: 96%;
	border:none;
	box-shadow: 0 0 0 1px #1e293e20;
	border-radius: 5px;
	font-size: 15px;
	outline: none;
	color: #444444;
}

.login .left .form-login form input[type="email"]:focus,
.login .left .form-login form input[type="password"]:focus{
	background: #ffffff;
	box-shadow: 0 0 0 1px #1e293e;
	transition: all .3s ease;
}

.login .left .form-login form .checkbox{
	width: 50%;
	float: left;
	padding: 0 0 0 35px;
	position: relative;
	line-height: 30px;
	font-weight: 600;
	font-size: 15px;
	color: #313131;
}

.login .left .form-login form .checkbox input[type="checkbox"]{
	display: none;
}

.login .left .form-login form .checkbox label{
	cursor: pointer;
}

.login .left .form-login form .checkbox label:before{
	content: "";
	width: 30px;
	height: 30px;
	left: 0px;
	display: block;
	position: absolute;
	border-radius: 50%;
	background: #f0f0f0;
	transition: all .3s ease;
}

.login .left .form-login form .checkbox label:hover:before{
	background: #1e293e30;
}



.login .left .form-login form .checkbox label:after{
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	background: transparent;
	top:8px;
	left: 8px;
	border-radius: 50px;
	transition: all .3s ease;
}

.login .left .form-login form input[type="checkbox"]:checked + label:after{
	cursor: pointer;
	background: #1e293e;
}

.login .left .form-login form span a{
	float: right;
	color: #2196F3;
	text-decoration: none;
}

.login .left .form-login form button{
	display: block;
	padding: 18px 2%;
	width: 96%;
	border:none;
	border-radius: 50px;
	background: #1565C0;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: 1px;
	outline: none;
	cursor: pointer;
}

.login .left .form-login form button:focus,
.login .left .form-login form button:hover{
	background-color: #10519D;
	transition: all .3s ease;
}

.login .right{
	background: #1e293e;
	width: 50%;
	float: right;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

@media(max-width:800px){
	.login .right{
		display: none;
	}
}

.login .right:before{
	content: "";
	width: 300px;
	height: 300px;
	border:solid 120px rgba(255,255,255,.05);
	border-radius: 50%;
	position: absolute;
	top:-150px;
	left: -150px;
	pointer-events: none;
}

.login .right:after{
	content: "";
	width: 500px;
	height: 500px;
	border:solid 120px rgba(255,255,255,.05);
	border-radius: 50%;
	position: absolute;
	bottom:-300px;
	right: -300px;
	pointer-events: none;
}

.login .right .middle{
	display: table;
	width: 80%;
	padding: 0 10%;
	height: 100%;
}

.login .right .middle .inter{
	vertical-align: middle;
	display: table-cell;
}

.login .right .middle .inter h1{
	font-size: 47px;
	color: rgba(255,255,255,.9);
	margin:0 0 10px 0;
}

.login .right .middle .inter h2{
	font-size: 18px;
	font-weight: 300;
	color: rgba(255,255,255,.5);
	max-width: 80%;
}

.login .right .middle .inter h3{
	font-size: 15px;
	font-weight: 300;
	color: rgba(255,255,255,1);
	max-width: 80%;
	font-weight: 600;
	margin:40px 0 0 0;
}

/* header */
header{
	background: #ffffff;
	position: fixed;
	width: 98%;
	text-align: right;
	height: 40px;
	line-height: 40px;
	padding: 10px 1%;
	z-index: 999;
	box-shadow: 0 0px 10px rgba(0,0,0,.2);
}

header .search-box{
	float: left;
	margin:0 0 0 17%;
	width: 70%;
	text-align: left;
}

header .search-box input[type="text"]{
	padding: 10px 0;
	width: 90%;
	float: left;
	border:none;
	outline: none;
	font-size: 15px;
	font-weight: 300;
}

header .search-box input[type="text"]::placeholder{
	color: #313131;
}

header .search-box button{
	width: 5%;
	float: left;
	border:none;
	background: transparent;
	padding: 11px 0;
	cursor: pointer;
	outline: none;
}

header .logout{
	text-align: center;
	float: right;
}

header .logout a{
	display: block;
	text-decoration: none;
	color: #ffffff;
	background: #e04b4e;
	padding: 0 20px;
	border-radius: 5px;
}

header .logout:hover a{
	background: #c5484b;
	transition-delay: .05s;
}

/* sidebar */
.sidebar{
	background: #10182a;
	width: 14.5%;
	padding: 0 1%;
	height: 100vh;
	position: relative;
	z-index: 999;
	float: left;
	position: fixed;
}

/* user-info */
.user-info{
	text-align: center;
	padding:30px 0 0 0;
}

.user-info .profile-image{
	width: 70px;
	height: 70px;
	overflow: hidden;
	border-radius: 50%;
	position: relative;
	margin:auto;
}

.user-info .profile-image img{
	width: 100%;
	pointer-events: none;
}

.user-info h2{
	font-size: 14px;
	color: #ffffff;
	margin:10px 0 0 0;
}

.user-info h3{
	font-size: 13px;
	color: #ffffff90;
	font-weight: 300;
}

/* nav */
.sidebar{
	overflow: scroll;
}
.sidebar nav{
	margin:30px 0 0 0;
}

.sidebar nav h2{
	font-size: 15px;
	margin:0 0 5px 0;
	color: #a678db;
}

.sidebar nav p{
	color: #999999;
	font-size: 12px;
	font-weight:400;
	margin:0 0 10px 0;
}

.sidebar nav ul li{
	display: block;
	margin:0 0 5px 0;
}

.sidebar nav ul li a{
	display: block;
	padding:12px  12px;
	font-size: 14px;
	color: #999999;
	text-decoration: none;
	border-radius: 5px;
}

.sidebar nav ul li a i{
	margin:0 10px 0 0;
}

.sidebar nav ul li.current-menu a,
.sidebar nav ul li:hover a{
	background: rgba(255,255,255,.15);
	color: #ffffff;
	transition-delay: .05s;
}

/* content */
.content{
	padding:80px .5% 10px 18%;
	width: 80.5%;
	background: #f9f9f9;
}

/* sections */
.section--1{
	width: 100%;
}

.section--1 article{
	width: 100%;
}

.section--2{
	width: 100%;
}

.section--2 article:nth-child(1){
	width: 49%;
	float: left;
}

.section--2 article:nth-child(2){
	width: 49%;
	float: left;
	margin:0 0 0 2%;
}

.section--3{
	width: 100%;
}

.section--3 article{
	width: 32%;
	float: left;
	margin:0 2% 0 0;
}

.section--3 article:nth-last-child(2){
	width: 32%;
	float: left;
	margin:0 0 0 0;
}

.section--4{
	width: 100%;
}

.section--4 article{
	width: 23.5%;
	float: left;
	margin:0 2% 0 0;
}

.section--4 article:nth-last-child(2){
	float: left;
	margin:0 0 0 0%;
}

.section--5{
	width: 100%;
}

.section--5 article{
	width: 18.4%;
	float: left;
	margin:0 2% 0 0;
}

.section--5 article:nth-last-child(2){
	float: left;
	margin:0 0 0 0%;
}

.section--6{
	width: 100%;
}

.section--6 article{
	width: 15%;
	float: left;
	margin:0 2% 0 0;
}

.section--6 article:nth-last-child(2){
	float: left;
	margin:0 0 0 0%;
}

/* padding */
.pd--10{ padding: 10px;}
.pd--20{ padding: 20px;}
.pd--30{ padding: 30px;}
.pd--40{ padding: 40px;}
.pd--0-20{ padding:0 20px 0 0;}

/* margin */
.mg--0{ margin: 10px !important;}
.mg--10{ margin: 10px;}
.mg--20{ margin: 20px;}
.mg--30{ margin: 30px;}
.mg--40{ margin: 40px;}
.mg--0-20{ margin:0 20px;}

/* margin top */
.mgt--10{ margin-top: 10px;}
.mgt--20{ margin-top: 20px;}
.mgt--30{ margin-top: 30px;}
.mgt--40{ margin-top: 40px;}
.mgt--0-20{ margin-top:0 20px;}

/* margin bottom */
.mgb--10{ margin-bottom: 10px;}
.mgb--20{ margin-bottom: 20px;}
.mgb--30{ margin-bottom: 30px;}
.mgb--40{ margin-bottom: 40px;}
.mgb--0-20{ margin-bottom:0 20px;}

/* alineación de texto */
.text--center{ text-align: center;}
.text--left{ text-align: left;}
.text--right{ text-align: right;}

/* bg-color */
.bg--white{ background: #ffffff;}
.bg--gray{ background: #f0f0f0;}
.bg--orange{ background: #ff8000;}
.bg--none{ background: transparent;}

/* color */
.c--white{ color: #ffffff;}
.c-black{ color: #313131;}

/* font-size */
.fs--10{ font-size: 10px;}
.fs--12{ font-size: 12px;}
.fs--13{ font-size: 13px;}
.fs--14{ font-size: 14px;}
.fs--15{ font-size: 15px;}
.fs--16{ font-size: 16px;}
.fs--18{ font-size: 18px;}
.fs--20{ font-size: 20px;}
.fs--20{ font-size: 20px;}
.fs--30{ font-size: 30px;}

.fw--300{ font-weight:300; }
.fw--400{ font-weight:400; }
.fw--500{ font-weight:500; }
.fw--600{ font-weight:600; }
.fw--700{ font-weight:700; }
.fw--800{ font-weight:800; }
.fw--900{ font-weight:900; }

.status{padding: 5px 10px;border-radius: 5px;font-size: 12px;font-weight: 600;color:#ffffff;}
.status1{background-color:#425B7B;}
.status2{background-color:#37B976;}
.status3{background-color:#999999;}
.status4{background-color:#B93737;}

/* enlaces */
.a--red{
	color: red !important;
	text-decoration: none;
}
.a--disable{
	color: #999999 !important;
	text-decoration: none;
	pointer-events: none;
}

.a-inline{
	display: inline-block;
	color: inherit;
	text-decoration: none;
	border:solid 1px;
	padding: 1px 10px;
	border-radius: 5px;
	font-size: 12px;
}

/* nav-1 */
.nav-1 li{
	float: left;
	list-style: none;
	line-height: 50px;
	border-left:solid 1px #f0f0f0;
	background: #ffffff;
}

.nav-1 li h2{
	padding: 0 10px;
	font-size: 14px;
}

.nav-1 li a{
	display: block;
	text-decoration: none;
	padding: 0 12px;
	color: #313131;
	font-weight: 600;
}

.nav-1 li a:hover{
	background: #10182a;
	color: #ffffff;
	transition-delay: .05s;
}

/* table--1 */
.table-1{
	width: 100%;
}

.table-1 tr:nth-child(1) td{
	padding: 10px;
	background: #10182a;
	color: #ffffff;
	font-weight: 600;
}

.table-1 tr td{
	padding: 10px;
	background: #ffffff;
	color: #313131;
	font-weight: 400;
	font-size: 14px;
}

.table-1 tr:nth-child(even) td{
	padding: 10px;
	background: #f0f0f0;
	color: #313131;
	font-weight: 400;
	font-size: 14px;
}

.table-1 tr td a{
	color: #10182a;
}

.table-1 tr td:hover a{
	color: rgb(59 130 246);
}

/* table--1 */
.table-2{
	width: 100%;
}

.table-2 tr:nth-child(1) td{
	padding: 10px;
	background: #7FC254;
	color: #ffffff;
	font-weight: 600;
}

.table-2 tr td{
	padding: 10px;
	background: #ffffff;
	color: #313131;
	font-weight: 400;
	font-size: 14px;
}

.table-2 tr:nth-child(even) td{
	padding: 10px;
	background: #f0f0f0;
	color: #313131;
	font-weight: 400;
	font-size: 14px;
}

.table-2 tr td a{
	color: #10182a;
}

.table-2 tr td:hover a{
	color: rgb(59 130 246);
}


.table-3 {
	width: 20%;
	float: right;
	margin:10px 0;
	border-radius: 5px;
}

.table-3 tr{
}

.table-3 tr td{
	padding: 10px;
	border-bottom: solid 1px rgba(0,0,0,.1);
}

.table-3 tr td:nth-child(1){
	text-align: right;
}

.table-3 tr td:nth-child(2){
	font-weight: 600;
}

.table-3 tr:nth-child(3) td{
	border:none;
}

/* detail--client */
.detail--client{
	padding: 20px;
}

.detail--client ul li{
	list-style: none;
	text-align: center;
	color: #10182a;
}

.detail--client ul li a{
	text-decoration: none;
	color: #10182a;
}

.detail--client .client-profile{
	line-height:70px;
	width:70px;
	font-size: 30px;
	border-radius: 50px;
	text-align: center;
	background: #10182a;
	color: rgba(255,255,255,.7);
	margin:0 auto 10px auto;
}

.detail--client .client-profile img{
	max-width: 100px;
	margin:0 0 -5px 0;
	border-radius: 50%;
}


.detail--client ul li:nth-child(2){
	font-size: 20px;
	font-weight: 900;
	margin:0 0 10px 0;
}

.detail--client ul li:nth-child(3){
	font-size: 15px;
	font-weight: 900;
	margin:0 0 10px 0;
}

.detail--client ul li:nth-child(4){
	font-size: 15px;
	font-weight: 900;
	margin:0 0 20px 0;
}

.detail--client ul li:nth-child(5){
	font-size: 13px;
	font-weight: 400;
	margin:0 0 5px 0;
}

.detail--client ul li:nth-child(6){
	font-size: 13px;
	font-weight: 400;
	margin:0 0 20px 0;
}

/* web--client */
.web--client{
	padding:10px 20px;
	border-radius: 4px;
	background: #ffffff;
	position: relative;
}

.web--client ul li{
	list-style: none;
	color: #10182a;
}

.web--client ul li a{
	text-decoration: none;
	color: #10182a;
}

.web--client .client-profile{
	line-height:70px;
	width:70px;
	float: left;
	font-size: 30px;
	border-radius: 50px;
	text-align: center;
	background: #10182a;
	color: rgba(255,255,255,.7);
	margin:0 10px 10px auto;
	text-transform: uppercase;
	pointer-events: none;
}


.web--client ul li:nth-child(2){
	font-size: 20px;
	font-weight: 900;
	margin:0 0 5px 0;
}


.web--client ul li:nth-child(3){
	font-size: 14px;
	font-weight: 300;
	margin:0 0 5px 0;
}

.web--client ul li:nth-child(4){
	font-size: 13px;
	font-weight: 400;
	margin:0 0 10px 0;
}

.web--client ul li:nth-child(5){
	font-size: 20px;
	font-weight: 400;
	pointer-events: none;
	margin:0 0 20px 0;
	position: absolute;
	top:10px;
	right: 10px;
}


/* form--1 */
.cell--1,
.cell--2{
	margin:0 0 20px 0;
}



.cell--1 input,
.cell--2 input,
.cell--2 select,
.cell--1 textarea,
.cell--2 textarea,
.cell--2 select{
	outline: none;
	transition: all .2s ease;
	font-size: 14px;
	font-weight: 300;
	border-radius: 3px;
	resize: none;
	outline: none;
	-webkit-appearance: none;
}

.cell--1 input:focus,
.cell--2 input:focus,
.cell--1 textarea:focus,
.cell--2 textarea:focus{
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

.cell--1 input[type="date"],
.cell--2 input[type="date"], 
.cell--3 input[type="date"]{
	cursor: pointer;
}


.cell--1 input::placeholder,
.cell--2 input::placeholder,
.cell--1 textarea::placeholder,
.cell--2 textarea::placeholder{
	color: #313131;
}

.cell--1 input,
.cell--1 textarea,
.cell--1 select{
	width: 96.6%;
	padding: 16px 1%;
	margin:0 2% 0 0;
	border:none;
}

.cell--2 input,
.cell--2 select,
.cell-2 textarea{
	width: 46.3%;
	padding: 16px 1%;
	float: left;
	margin:0 2% 0 0;
	border:none;
	outline: none;
}

.cell--2 select,
.cell--1 select{
	cursor: pointer;
	width: 98.5%;
}

.cell--2 input:nth-child(2){
	margin:0 0 0 0;
}



.cell--2 span{
	width: 47.2%;
	padding: 0px 0%;
	float: left;
	margin:0 2% 0 0;
	border:none;
	outline: none;
	position: relative;
}

.cell--2 span em{
	font-size: 14px;
	font-weight:600;
	font-style: normal;
	padding: 5px 10px;
	color: #6E84B6;
}

.cell--2 span input{
	width: 100%;
	margin:0 0 0 0 !important;
}

.cell--2 span:nth-child(2){
	margin:0 0 0 1%;
}

.cell--3 input,
.cell--3 textarea{
	width: 29.5%;
	padding: 16px 1%;
	float: left;
	margin:0 2% 20px 0;
	border:none;
	outline: none;
}

.cell--3 input:nth-child(3){
	margin:0 0 20px 0;
}

.form--1 button{
	background: #6E84B6;
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
	border:none;
	padding: 14px 20px;
	cursor: pointer;
	transition: all .2s ease;
	outline: none;
	border-radius: 3px;
}

.form--1 button:hover,
.form--1 button:focus{
	background: #DC9A7E;
	color: #ffffff;
}


.form--2{
	margin:0 0 20px 0;
}

.form--2 input[type="text"]{
	width: 79%;
	padding: 17px 3%;
	border:none;
	background: #f0f0f0;
	float: left;
	border-radius: 5px 0 0 5px;
	font-size: 15px;
	font-weight: 300;
	outline: none;
}

.form--2 input[type="text"]::placeholder{
	color: #212121;
}

.form--2 button{
	background: #6E84B6;
	padding: 17px 0;
	width: 15%;
	border:none;
	float: left;
	cursor: pointer;
	border-radius: 0 5px 5px 0;
	color: #ffffff;
	outline: none;
	font-size: 15px;
	transition: all .3s linear;
}

.form--2 button:hover, 
.form--2 button:focus{
	background: #B96EA5;
}


.form--3{
	margin:0 0 10px 0;
}

.form--3 input[type="text"],
.form--3 textarea{
	width: 94%;
	padding: 17px 3%;
	border:none;
	background: #f0f0f0;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 300;
	outline: none;
	margin:0 0 10px 0;
	resize: none;
}

.form--3 input[type="text"]::placeholder,
.form--3 textarea::placeholder{
	color: #212121;
}

.form--3 button,
.form--3 input[type="submit"]{
	background: #6E84B6;
	padding: 13px 20px;
	border:none;
	cursor: pointer;
	border-radius: 5px;
	color: #ffffff;
	outline: none;
	font-size: 15px;
	transition: all .3s linear;
}

.form--3 button:hover, 
.form--3 button:focus{
	background: #B96EA5;
}


.form--4{
	margin:0 0 10px 0;
}

.form--4 h3{
	font-size: 16px;
	color: #313131;
	margin:10px;
}

.form--4 input[type="text"],
.form--4 textarea{
	width: 94%;
	padding: 17px 3%;
	border:none;
	background: #f0f0f0;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 300;
	outline: none;
	margin:0 0 10px 0;
	resize: none;
}

.form--4 input[type="text"]::placeholder,
.form--4 textarea::placeholder{
	color: #212121;
}

.form--4 button,
.form--4 input[type="submit"]{
	background: #6E84B6;
	padding: 17px 20px;
	border:none;
	cursor: pointer;
	border-radius: 5px;
	color: #ffffff;
	outline: none;
	font-size: 15px;
	transition: all .3s linear;
	margin:0 0 0 4%;
}

.form--4 button:hover, 
.form--4 button:focus{
	background: #B96EA5;
}

/* form--selection */
.form--selection{
	display: flex;
	width: 100%;
	gap: 10px;
	line-height: 40px;
	font-weight: 600;
	color: #777777;
}

.form--selection select{
	padding: 10px;
	border-radius: 5px;
	outline: none;
	-webkit-appearance: none;
	cursor: pointer;
	width: 100%;
	max-width: 300px;
	border:solid 1px #f0f0f0;
	color: #313131;
	text-transform: uppercase;
}

/* radio */
.radio--1{
	padding: 0 0 20px 0;
}

.radio--1 span{
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin:0 0 15px 10px;
	color: #6E84B6;
}

.radio--1 input[type="radio"]{
	display: none;
}

.radio--1 label{
	font-size: 14px;
	background: #f0f0f0;
	width: 30%;
	padding: 5px 3% 5px 25px;
	border-radius: 25px;
	font-weight: 600;
	position: relative;
	color: #777777;
	cursor: pointer;
}

.radio--1 label:before{
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50px;
	background: #ffffff;
	left: 6px;
	top:6px;
}

.radio--1 label:after{
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50px;
	left: 9px;
	top:9px;
	opacity: 0;
}


.radio--1 input[type="radio"]:checked + label{
	color: #444444;
}

.radio--1 input[type="radio"]:checked + label:before{
}

.radio--1 input[type="radio"]:checked + label:after{
	background: #313131;
	opacity: 1;
	transition: all .3s ease;
}

/** botones **/
.btn--2{
	width: 100%;
	background: #6E84B6;
	padding: 14px 0px;
	border:none;
	cursor: pointer;
	border-radius: 3px;
	color: #ffffff;
	outline: none;
	font-size: 15px;
	transition: all .3s linear;
}

.btn--2:hover, 
.btn--2:focus{
	background-color: #10182a;
}
/* alert */
.alert{
	padding: 20px 2%;
	margin:20px 0;
}

.alert--1{
	background: #6E84B620;
	color: #6E84B6;
}

/* history--client */
.history--client{
	max-height: 65vh;
	overflow: scroll;
}
.history--client div{
	padding: 0 10px;
	font-size: 14px;
	font-weight: 300;
	color: #666666;
	white-space: pre-line;
	position: relative;
}
.history--client div:nth-child(odd){
	background: #6E84B620;
}

.history--client div span{
	color: #6E84B6;
	font-size: 12px;
	float: left;
	margin:0 10px 0 0;
	width: 130px;
	font-weight: 600;
}

.history--client div em{
	margin:0 0 0 140px;
	display: block;
	font-style: normal;
	color: #313131;
}


/* projects */
.projects article{
	min-height: 100px;
	place-items: center;
	height: 120px;
	display: flex;
	overflow: hidden;
	transition: all .2s linear;
	position: relative;
}

.projects article:hover{
	box-shadow: 0 5px 20px rgba(0,0,0,.3);
}

.projects .buttons-single{
	position: absolute;
	right: 10px;
	top:10px;
	font-size: 10px;
	line-height: 25px;
	text-align: center;
	opacity: 0;
}

.projects article:hover .buttons-single{
	opacity: 1;
	transition: all .3s ease;
}

.projects .buttons-single li{
	display: inline-block;
	margin:0 0 0 5px;
}

.projects .buttons-single ul li a{
	display: block;
	background: #414141;
	width: 25px;
	line-height: 25px;
	border-radius: 4px;
}


.projects .buttons-single ul li:nth-child(1) a{
	background: #16a085;
	transition: all .2s ease;
}


.projects .buttons-single ul li:nth-last-child(1) a{
	background: red;
	transition: all .2s ease;
}


.projects article.status1{
	background: #10182a;
	color: #ffffff;
	margin:5px 5px;
}

.projects article.status2{
	background: #16a085;
	color: #ffffff;
	margin:5px 5px;
}

.projects article.status3{
	background: #e74c3c;
	color: #ffffff;
	margin:5px 5px;
}

.projects article a{
	text-decoration: none;
	color: unset;
}

.projects article h2{
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 400;
	max-height: 60px;
	overflow: hidden;
}

.projects article h3{
	font-size: 13px;
	font-weight: 300;
	margin:5px 0 0 0;
	opacity: .7;
}


.projects article h4{
	font-size: 13px;
	font-weight: 300;
	margin:5px 0 0 0;
	opacity: .7;
}

.important--status{
	background: #e74c3c !important;
}

.important--status--alert{
	position: absolute;
	bottom:10px;
	right: 10px;
	width: 45px;
	line-height: 45px;
	text-align: center;
	background: #ffffff25;
	border-radius: 50px;
	pointer-events: none;
}

.detail--project{
	background: #16a085;
	color: #ffffff;
}

.detail--project h2{
	font-size: 20px;
	font-weight: 500;
	position: relative;
}

.detail--project ul{
	display: inline-block;
	float: right;
	font-size: 14px;
	list-style: none;
	margin:0 0 0 10px;
}

.detail--project ul li{
	background-color: #ffffff;
	color: #313131;
	padding: 5px;
	border-radius: 3px;
	font-size: 13px;
}

.detail--project h2 span{
	position: absolute;
	right: 0;
	top:0;
	font-size: 12px;
	background-color: #ffffff;
	color: #212121;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 4px;
	pointer-events: none;
}

.detail--project h3{
	font-size: 13px;
	font-weight: 300;
}

.detail--project h4{
	font-size: 14px;
	font-weight: 300;
	opacity: .7;
	margin:10px 0 0 0;
}

.detail--project p{
	font-size: 15px;
	font-weight: 300;
	opacity: .7;
	margin:10px 0 0 0;
}

.item--historial h3{
	font-size: 400;
	padding: 0 10px;
	font-size: 15px;
	color: #444444n ;
}

.item--historial p{
	font-size: 15px;
	font-weight:300;
	color: #444444;
	padding: 10px;
}

.single-text{
	position: relative;
	padding-right: 70px;
}
.pre-line{
	white-space: pre-line;
}

.pd-l-50{
	margin:0 0 0 60px;
}

/** Modales **/
.ventana-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contenido-ventana {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 30px 30px 10px 30px;
  border-radius:5px;
  border: 1px solid #888;
  width: 50%;
  position: relative;
}

.contenido-ventana h2{
	font-size: 20px;
	font-weight: 400;
	color: #414141;
	margin:0 0 10px 0;
}

.cerrar {
  float: right;
  font-size: 20px;
  text-align: center;
  display: block;
  font-weight: bold;
  position: absolute;
  top:-30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  right: 0;
  color: #ffffff;
}

.cerrar:hover,
.cerrar:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

/* update--button */
.update--button{
	position: absolute;
	line-height: 50px;
	width: 50px;
	top:50%;
	transform: translateY(-50%);
	right: 15px;
	text-align: center;
}

.update--button a{
	display: block;
	background: rgba(0,0,0,.2);
	border-radius: 50px;
	color: #ffffff;
	transition: all .3s linear;
}

.update--button a.ok{
	background-color: #16a085 !important;
}

.update--button:hover a{
	box-shadow: 0 0 0 7px #16a08530;	
}

.enumerador{
	width: 50px;
	line-height: 50px;
	background: #444444;
	pointer-events: none;
	text-align: center;
	float: left;
	margin:0 10px;
	font-size: 17px;
	font-weight: 900;
	color: #ffffff;
	border-radius: 50px;
}

/* Estilo para la ventana modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-contenido {
  background-color: #ffffff;
  margin: 15% auto;
  padding: 20px 20px 1px 20px;
  width: 80%;
  max-width: 500px;
  position: relative;

  animation-name: modal-fade-in;
  animation-duration: 0.5s;
}

.modal-contenido  input,
.modal-contenido  textarea{
	background: #f0f0f0;
}

/* Animación para la ventana modal */
@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-cerrar,
.close {
  color: #aaa;
  float: right;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: -30px;
  line-height: 30px;
  width: 30px;
  display: block;
  text-align: center;
  right: 0px;
  cursor: pointer;
  color: #ffffff;
}