/*Styles for components of account homepage (dashboard) for NauticEd account*/

.dashboard-item .inner {
	border: solid #d1d2d3;
	border-width: 3px 1px 1px;
	display: block;
	margin: 20px 0 25px;
	overflow: hidden;
	position: relative;
	background-color: #fff;
	outline-offset: 1px;
}

.dashboard-item .hover-effect {
	padding: 20px;
	background-color: #fff;
	-webkit-transition: transform 0.35s ease 0s;
	-o-transition: transform 0.35s ease 0s;
	transition: transform 0.35s ease 0s;
	position: relative;
	z-index: 2;
}

.dashboard-item .inner:hover .hover-effect{
	-webkit-transform: translate3d(0px, -145px, 0px);
	-ms-transform: translate3d(0px, -145px, 0px);
	-o-transform: translate3d(0px, -145px, 0px);
	transform: translate3d(0px, -145px, 0px);
}

.dashboard-item a {
	color: #5a5a5a;
}

.dashboard-item h2 {
	margin-top: 12px;
	font-size: 25px;
	font-weight: 600;
}

.dashboard-item p:last-child {
	margin-bottom: 0;
}

.dashboard-item b.colored {
	font-size: 16px;
}

.dashboard-item i {
	display: block;
    font-size: 125px;
    margin: 0 auto 20px;
    text-align: center;
}

.dashboard-item i.view-more {
	position: absolute;
	left: 0;
	bottom: -165px;
	width: 100%;
	margin: 0;
	z-index: 1;
	-webkit-transition: bottom 0.35s ease 0s;
	-o-transition: bottom 0.35s ease 0s;
	transition: bottom 0.35s ease 0s;
}

.dashboard-item .inner:hover i.view-more {
	bottom: 20px;
}

@media (min-width: 35.5em) {
	.dashboard-item  .hover-effect {
		height: 250px;
	}
	
	.dashboard-item i {
		float: left;
		height: 210px;
		line-height: 210px;
		margin: 0 20px 0 0;
		width: 165px;
	}
	
	.dashboard-item i.view-more {
		right: -165px;
		left: auto;
		top: 20px;
		bottom: auto;
		width: 165px;
		-webkit-transition: right 0.35s ease 0s;
		-o-transition: right 0.35s ease 0s;
		transition: right 0.35s ease 0s;
	}
	
	.dashboard-item .inner:hover i.view-more {
		right: 0;
	}
	
	.dashboard-item .inner:hover .hover-effect{
		-webkit-transform: translate3d(-185px, 0px, 0px);
		-ms-transform: translate3d(-185px, 0px, 0px);
		-o-transform: translate3d(-185px, 0px, 0px);
		transform: translate3d(-185px, 0px, 0px);
	}
	
	.dashboard-item .progress,
	.dashboard-item .pc-title {
		margin-left: 185px;
	}
}

@media (min-width: 48em) {
	.dashboard-item  .hover-effect {
		height: 370px;
	}
	
	.dashboard-item i {
		float: none;
		height: auto;
		line-height: 1;
		margin: 0 auto 20px;
		width: auto;
	}
	
	.dashboard-item i.view-more {
		left: 0;
		bottom: -165px;
		top: auto;
		right: auto;
		width: 100%;
		-webkit-transition: bottom 0.35s ease 0s;
		-o-transition: bottom 0.35s ease 0s;
		transition: bottom 0.35s ease 0s;
	}
	
	.dashboard-item .inner:hover i.view-more {
		bottom: 20px;
	}
	
	.dashboard-item .inner:hover .hover-effect{
		-webkit-transform: translate3d(0px, -145px, 0px);
		-ms-transform: translate3d(0px, -145px, 0px);
		-o-transform: translate3d(0px, -145px, 0px);
		transform: translate3d(0px, -145px, 0px);
	}
	
	.dashboard-item .progress,
	.dashboard-item .pc-title {
		margin-left: 0;
	}
}

@media (min-width: 64em) {
	.dashboard-item  .hover-effect {
		height: 270px; 
	}

	.dashboard-item i {
		float: left;
		height: 230px;
		line-height: 230px;
		margin: 0 20px 0 0;
		width: 165px;
	}
	
	.dashboard-item i.view-more {
		right: -165px;
		left: auto;
		top: 20px;
		bottom: auto;
		width: 165px;
		-webkit-transition: right 0.35s ease 0s;
		-o-transition: right 0.35s ease 0s;
		transition: right 0.35s ease 0s;
	}
	
	.dashboard-item .inner:hover i.view-more {
		right: 0;
	}
	
	.dashboard-item .inner:hover .hover-effect{
		-webkit-transform: translate3d(-185px, 0px, 0px);
		-ms-transform: translate3d(-185px, 0px, 0px);
		-o-transform: translate3d(-185px, 0px, 0px);
		transform: translate3d(-185px, 0px, 0px);
	}
		
	.dashboard-item .progress,
	.dashboard-item .pc-title {
		margin-left: 185px;
	}

	.long-text p {
		font-size: 13px;
	}

	.long-text h2 {
		letter-spacing: -.05em;
	}
}

@media (min-width: 75em) {
	.dashboard-item  .hover-effect {
		height: 260px; 
	}

	.dashboard-item i {
		height: 220px;
		line-height: 220px;
	}
	
	.dashboard-item h2 {
		font-size: 30px;
		margin-top: 6px;
	}
}

/*Red*/
.dashboard-item.red .inner {
	border-top-color: #f3565d;
}

.dashboard-item.red i,
.dashboard-item.red b.colored,
.dashboard-item.red .pc-title .percent {
	color: #f3565d;
}

.dashboard-item.red .progress .progress-bar-success {
	background-color: #f3565d;
}

.red-force {
    text-decoration-color: #f3565d; 
    color: #f3565d;
}

/*Blue*/
.dashboard-item.blue .inner {
	border-top-color: #3281b5;
}

.dashboard-item.blue i,
.dashboard-item.blue b.colored,
.dashboard-item.blue .pc-title .percent {
	color: #3281b5;
}

.dashboard-item.blue .progress .progress-bar-success {
	background-color: #3281b5;
}

.blue-force {
    text-decoration-color: #3281b5; 
    color: #3281b5;
}

/*Orange*/
.dashboard-item.orange .inner {
	border-top-color: #ff5200;
}

.dashboard-item.orange i,
.dashboard-item.orange b.colored,
.dashboard-item.orange .pc-title .percent {
	color: #ff5200;
}

.dashboard-item.orange i {
	opacity: 0.8;
}

.dashboard-item.orange .progress .progress-bar-success {
	background-color: #ff5200;
	opacity: 0.8;
}

.orange-force {
    text-decoration-color: #ff5200; 
    color: #ff5200;
}

/*Green*/
.dashboard-item.green .inner {
	border-top-color: #45b6af;
}

.dashboard-item.green i,
.dashboard-item.green b.colored,
.dashboard-item.green .pc-title .percent {
	color: #45b6af;
}

.dashboard-item.green .progress .progress-bar-success {
	background-color: #45b6af;
}

.green-force {
    text-decoration-color: #45b6af; 
    color: #45b6af;
}

/*Green-2*/
.dashboard-item.green2 .inner {
	border-top-color: #45b563;
}

.dashboard-item.green2 i,
.dashboard-item.green2 b.colored,
.dashboard-item.green2 .pc-title .percent {
	color: #45b563;
}

.dashboard-item.green2 .progress .progress-bar-success {
	background-color: #45b563;
}

.green2-force {
    text-decoration-color: #45b563; 
    color: #45b563;
}

/*Black*/
.dashboard-item.black .inner {
	border-top-color: #000;
}

.dashboard-item.black i,
.dashboard-item.black b.colored,
.dashboard-item.black .pc-title .percent {
	color: #000;
}

.dashboard-item.black .progress .progress-bar-success {
	background-color: #000;
}

.black-force {
    text-decoration-color: #000; 
    color: #000;
}

/*Yellow*/
.dashboard-item.yellow .inner {
	border-top-color: #dfba49;
}

.dashboard-item.yellow i,
.dashboard-item.yellow b.colored,
.dashboard-item.yellow .pc-title .percent {
	color: #dfba49;
}

.dashboard-item.yellow .progress .progress-bar-success {
	background-color: #dfba49;
}

.yellow-force {
    text-decoration-color: #dfba49; 
    color: #dfba49;
}

/*Purple*/
.dashboard-item.purple .inner {
	border-top-color: #8e44ad;
}

.dashboard-item.purple i,
.dashboard-item.purple b.colored ,
.dashboard-item.purple .pc-title .percent{
	color: #8e44ad;
}

.dashboard-item.purple .progress .progress-bar-success {
	background-color: #8e44ad;
}

.purple-force {
    text-decoration-color: #8e44ad; 
    color: #8e44ad;
}

/*Pink*/
.dashboard-item.pink .inner {
	border-top-color: #ff499e;
}

.dashboard-item.pink i,
.dashboard-item.pink b.colored ,
.dashboard-item.pink .pc-title .percent{
	color: #ff499e;
}

.dashboard-item.pink .progress .progress-bar-success {
	background-color: #ff499e;
}

/*No hover effect on touch screens

.touch .dashboard-item .inner:hover .hover-effect{
	-webkit-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	background-color: #dadbdc;
}

.touch .dashboard-item .inner:hover {
	border-left-color: #d1d2d3;
	border-right-color: #d1d2d3;
	border-bottom-color: #d1d2d3;	
}*/

/*Progress bar*/

.dashboard-item .progress {
	margin-bottom: 20px;
}