/*
 * Start Bootstrap - Heroic Features (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.hero-spacer {
    margin-top: 50px;
}

.hero-feature {
    margin-bottom: 30px;
}

footer {
    margin: 50px 0;
}

.navbar-inverse {
    background-color: #428bca;
    background-image: none;
    color: white;
}

.navbar-inverse .navbar-brand {
  color: #fff;
}

.navbar-inverse .navbar-nav > li > a {
  color: #fff;
}

/* Tabs panel */
.tabbable-panel {
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

/* Below tabs mode */

.tabbable-line.tabs-below > .nav-tabs > li {
  border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
  margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
  border-bottom: 0;
  border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
  margin-bottom: -2px;
  border-bottom: 0;
  border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
  margin-top: -10px;
  border-top: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}
.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline;
     zoom:1;
}

.nav-tabs, .nav-pills {
    text-align:center;
}


/*------------------------------------*\
	Courses
\*------------------------------------*/
.course {
	margin-top:20px;
	margin-bottom:20px;
}

.course .course-img {
	position: relative;
	display:block;
	margin-bottom:20px;
	border-radius:4px;
	overflow:hidden;
}

.course .course-img > img {
	width:100%;
}

.course-img:after {
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	background-color:#FF6700;
	opacity:0;
	-webkit-transition:0.2s opacity;
	transition:0.2s opacity;
}

.course .course-img:hover:after {
	opacity:0.7;
}

.course .course-img .course-link-icon {
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform: translate(-50% , calc(-50% - 15px));
	    -ms-transform: translate(-50% , calc(-50% - 15px));
	        transform: translate(-50% , calc(-50% - 15px));
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	border:2px solid #fff;
	color:#fff;
	border-radius:50%;
	opacity:0;
	z-index:10;
	-webkit-transition:0.2s all;
	transition:0.2s all;
}

.course .course-img:hover .course-link-icon {
	-webkit-transform: translate(-50% , -50%);
	    -ms-transform: translate(-50% , -50%);
	        transform: translate(-50% , -50%);
	opacity:1;
}

.course .course-title {
	display:block;
	height:42px;
}

.course .course-details {
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid #EBEBEB;
}

.course .course-details .course-price {
	float: right;
}

.course .course-details .course-price.course-free {
	color: green;
}

.course .course-details .course-price.course-premium {
	color: #FF6700;
}

#courses .center-btn {
	text-align:center;
	margin-top:40px;
}