/************************************/
/* Kevelle Demo page CSS Overrides */
/***********************************/

/****************************/
/* Colors & Formatting */
/****************************/

a:hover, a:focus{
   color: #F36523;
}

h1, h2{
   color: #F36523;
}

h3, h4, h5{
   color: #006BEF;
}

a.white{
   color:white;
}

blockquote,
blockquote p{
   font-family: 'Josefin Sans', sans-serif;
}

.page-header{
	margin: 0.5em 0 1em;
}

/****************************/
/* Layout */
/****************************/
img { 
   max-width: 100%;
}

.kev-no-ws{
   padding:0;
   margin:0;
}

.height-auto-kev{
   height: 100%;
}

.media-left, .media-right{
   padding-left: 0px;
   padding-right: 0px;
}

.ksport-img{
   display: inline-block;
   height: auto;
   max-width: 100%;
}

.ksport-preview{
   list-style: none;   
}

.ksport-preview li{
   
   max-width: 400px;
   margin: 1em;
}

.enterpr-kev{
   background-image:url(../images/background.jpg);
   background-size: cover;
   background-attachment: fixed;
   background-position: 50% 0px;
   background-repeat: no-repeat;
}

.ks-port-bg{
   background-color: rgba(255, 255, 255, 0.5);
   padding: 1em;
}

.kev-bot{
   margin-bottom: 25px;
   <!-- added kev-bot for moz shake -->
}

/****************************/
/* Menus */
/****************************/

#sidebar {
   text-align: left;
   margin-top: 1em;
}

#navbar .nav{
   border-left: 2px #F36523 solid;
   margin: 5px 0 5px 2em;
} /* add margin to add vertical space around border */

#navbar .nav li.first{
   margin-left: 1em;
}

#navbar .nav li a{
   margin: -5px 0;
} /* removed margin space from elements to re-align */



.navbar-kevelle,
.navbar-kevelle .navbar-nav .open .dropdown-menu{
   background-color: #892281;
   color: fff;
   border-color: #B22CA7;
}

.navbar-kevelle>.container .navbar-brand,
.navbar-kevelle>.container-fluid .navbar-brand,
.navbar-kevelle .navbar-nav>li>a,
.navbar-kevelle .navbar-nav .open .dropdown-menu>li>a,
.navbar-kevelle .navbar-collapse, 
.navbar-kevelle .navbar-form{
   color: #fff;
   border-color: #F36523;
}

.navbar-kevelle .navbar-nav>.active>a,
.navbar-kevelle .navbar-nav>.active>a:focus, 
.navbar-kevelle .navbar-nav>.active>a:hover,
.navbar-kevelle .navbar-nav>li>a:hover,
.navbar-kevelle .navbar-nav>li>a:focus,
.navbar-kevelle .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-kevelle .navbar-nav .open .dropdown-menu>li>a:focus{
   color: #F36523;
   text-decoration: underline;
   background-color: #fff;
   /*background-color: #892281;*/
}

.navbar-kevelle .navbar-nav>.active,
.navbar-kevelle .navbar-nav>.active>a,
.navbar-kevelle .navbar-nav>.active>a:focus,
.navbar-kevelle .navbar-nav>.active>a:hover,
.navbar-kevelle .navbar-nav>.open,
.navbar-kevelle .navbar-nav>.open>a, 
.navbar-kevelle .navbar-nav>.open>a:focus, 
.navbar-kevelle .navbar-nav>.open>a:hover,
.navbar-kevelle>li.active,
.navbar-kevelle li a.active,
.navbar-kevelle>li.open{
   background-color: #fff;
   color:#F36523;
}

.navbar-kevelle .navbar-nav>.open>a,
.navbar-kevelle .navbar-nav>.open>a:focus, 
.navbar-kevelle .navbar-nav>.open>a:hover{
   color: #F36523;
}

.navbar-kevelle .dropdown-header{
   color: #fff;
}

.navbar-kevelle .navbar-toggle{
   border-color: #fff;
}

.navbar-kevelle .navbar-toggle .icon-bar{
   background-color: #fff;
}

.navbar-kevelle .navbar-toggle:hover,
.navbar-kevelle .navbar-toggle:focus,
.navbar-kevelle .navbar-toggle .icon-bar:hover{
   background-color: #F36523;
}


/****************************/
/* Portfolio grids etc */
/****************************/
.kev-portfolio-thumbs{
   list-style: none;
}

.kev-portfolio-thumbs li a img{
   max-width: 100%;
   height: auto;
   height: auto;
   /*border: 2px solid #ebebeb;*/
}

.kev-portfolio-thumbs li{
   float: left;
   background: #fff;
   padding: 0em;
   margin: 1.5em;
   position: relative;
   box-shadow: 0 3px 5px rgba(0,0,0,0.3);
   
}

.kev-portfolio-thumbs li a,
.kev-portfolio-thumbs li a img{
   display: block;
   position: relative;
}

.kev-portfolio-thumbs li a{
   overflow: hidden;
   
}

.kev-portfolio-thumbs li a div{
   position: absolute;
   background: rgba(16, 16, 16, 0.7);
   width: 100%;
   height: 100%;
}

.kev-portfolio-thumbs li a div.custom-hover-object {
	position: absolute;
	background: #333;
	background: rgba(255,255,255,0.7);
	width: 100%;
	height: 100%;
}

.kev-portfolio-thumbs li a div span {
	display: block;
	padding: 10px 0;
	margin: 40px 20px 20px 20px;
	text-transform: uppercase;
   text-align: center;
	font-weight: 400;
	color: rgba(243,101,35,1);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	border-bottom: 2px solid rgba(243,101,35,0.5);
	box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}

.kev-portfolio-thumbs li a div.custom-hover-object span {
	color: rgba(75,75,75,0.9);
	text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.5);
	box-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 -10px 0 rgba(0,0,0,0.3);
}

.kev-portfolio-thumbs li a div span h5{
   color: #FFF;
   text-transform: uppercase;
   text-align: center;
   font-weight: 600;
}


.kev-portfolio-thumbs li a div {
	top: 0px;
	left: -100%;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.kev-portfolio-thumbs li a:hover div{
	left: 0px;
}

.media .carousel-inner .item{
   paddig: 1em;
}

/****************************/
/* Tables & Panels */
/****************************/

.lrgicon {
   font-size: 32px;
   color: #006BEF;
    }

/*Styles for Circle Hover */
.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ch-thumb {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
	
	-webkit-transform-origin: 95% 40%;
	-moz-transform-origin: 95% 40%;
	-o-transform-origin: 95% 40%;
	-ms-transform-origin: 95% 40%;
	transform-origin: 95% 40%;
	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.ch-thumb:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	border-radius: 50%;
	top: 40%;
	left: 95%;
	margin: -4px 0 0 -4px;
	background: rgb(14,14,14);
	background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

.ch-img-1 { 
	background-image: url(../images/persp.png);
	z-index: 12;
}

.ch-img-2 { 
	background-image: url(../images/cv_os.png);
	z-index: 11;
}

.ch-img-3 { 
	background-image: url(../images/sw-board.png);
	z-index: 10;
}

.ch-info {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	background: #F36523 url(../images/noise.png);
	box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 60px;
	padding: 22px 0 0 0;
	height: 85px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: #333;
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.3);
	border-radius: 50%;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 24px;
	margin: 7px auto 0;
	font-family: 'Open Sans', Arial, sans-serif;
	opacity: 0;
	
	-webkit-transition: 
		-webkit-transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
	-moz-transition: 
		-moz-transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
	-o-transition: 
		-o-transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
	-ms-transition: 
		-ms-transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
	transition: 
		transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
		
	-webkit-transform: translateX(60px) rotate(90deg);
	-moz-transform: translateX(60px) rotate(90deg);
	-o-transform: translateX(60px) rotate(90deg);
	-ms-transform: translateX(60px) rotate(90deg);
	transform: translateX(60px) rotate(90deg);
		
	-webkit-backface-visibility: hidden;
}

.ch-info p a:hover {
	background: rgba(255,255,255,0.5);
}

.ch-item:hover .ch-thumb {
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
	-webkit-transform: rotate(-110deg);
	-moz-transform: rotate(-110deg);
	-o-transform: rotate(-110deg);
	-ms-transform: rotate(-110deg);
	transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
	opacity: 1;
	-webkit-transform: translateX(0px) rotate(0deg);
	-moz-transform: translateX(0px) rotate(0deg);
	-o-transform: translateX(0px) rotate(0deg);
	-ms-transform: translateX(0px) rotate(0deg);
	transform: translateX(0px) rotate(0deg);
}

.panel-heading span {
    margin-top: -20px;
    font-size: 15px;
}
.rowpanel {
    margin-top: 40px;
    padding: 0 10px;
}
.clickable {
    cursor: pointer;
}    

.carousel-control.left {
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.2) 0,rgba(0,0,0,.0001) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.2) 0,rgba(0,0,0,.0001) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.2)),to(rgba(0,0,0,.0001)));
    background-image: linear-gradient(to right,rgba(0,0,0,.2) 0,rgba(0,0,0,.0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	background-repeat: repeat-x;
}

.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.2) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.2 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
    background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	background-repeat: repeat-x;
}

/****************************/
/* Footer */
/****************************/

.kevelle-footer{
   text-align: center;
   padding-top: .5em;
   color: #fff;
}