/*
Grid rotator
=========================== */
.gridrotator{
	position:relative;
	overflow:hidden;
	width:100%;
	margin:0;
	padding:0;
}

.grid-wrapper{
	background:url(../img/grid-wrapper-bg.png) repeat 0 0;
	height: 100%;
	padding-top:40px;
	position: absolute;
	font-weight:normal;
	text-transform:uppercase;
	font-size:36px;
	line-height:42px;
	color:#fff;
	text-align:center;
	width: 100%;
	z-index: 1;
}

.grid-relative{
	position:relative;
	padding-bottom:60px;
}

.grid-wrapper h3{
	font-weight:bold;
	text-transform:uppercase;
	font-size:110px;
	line-height:110px;
}

.grid-wrapper ul{
	font-size:24px;
	line-height:36px;
	font-style:italic;
}

.ri-grid{
	margin:0 auto;
	position: relative;
	height: auto;	
}

.ri-grid ul {
	list-style: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.ri-grid ul:before,
.ri-grid ul:after{
	content: '';
    display: table;
}

.ri-grid ul:after {
    clear: both;
}

.ri-grid ul {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
} 

.ri-grid ul li {
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-o-perspective: 400px;
	-ms-perspective: 400px;
	perspective: 400px;	
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	display: block;
	overflow: hidden;
	background: #000;
}

.ri-grid ul li a{
	display: block;
	outline: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #333;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* Grid wrapper sizes */
.ri-grid-size{
	width: 55%;
}
.ri-grid-size{
	width: 100%;
}

/* Shadow style */
.ri-shadow:after,
.ri-shadow:before{
	content: "";
	position: absolute;
	z-index: -2;
	bottom: 15px;
	left: 10px;
	width: 50%;
	height: 20%;
	max-width: 300px;
	max-height: 100px;
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.ri-shadow:after{
	right: 10px;
	left: auto;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
}

.ri-grid-loading:after,
.ri-grid-loading:before{
	display: none;
}

.ri-loading-image{
	display: none;
}

.ri-grid-loading .ri-loading-image{
	position: relative;
	width: 30px;
	height: 30px;
	left: 50%;
	margin: 100px 0 0 -15px;
	display: block;
}

/*
Animated bg 
================================================== */
#animated-bg {
	height:auto; 
	background: url(../img/slides/animatedbg/1.jpg) repeat left top;
}
	
/*
Ui to top
=========================== */
#toTop{
	display:none;
	text-decoration:none;
	z-index:600;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:-999px;
	background-image:url(../img/ui.totop.png);
	background-repeat:no-repeat;
	background-position: top left;
}

#toTopHover{
	background-image:url(../img/ui.totop.png);
	background-repeat:no-repeat;
	background-position: left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus{
	outline:none;
}

/*
Animated
=========================== */

.animated {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.bounce {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}





/*
Custom responsive
=========================== */
@media (min-width: 1200px) {
	.grid-wrapper{
		font-size:45px;
		line-height:56px;
	}
	.grid-wrapper h3{
		font-size:140px;
		line-height:140px;
	}
	.span3 .image-title h4{
		font-size:18px;
		line-height:18px;
	}	
	.span3 .portfolio-metta{ 
		margin-bottom:-35px;
	}
	.span4 .portfolio-metta{ 
		margin-bottom:0;
	}	
}

@media (min-width: 768px) and (max-width: 979px) {
	header{
		position:relative;
	}
	#featured{
		padding:0;
	}
	#page-header{
		padding:35px 0 35px 0;
	}
	#browse-menu ul li{
		float:left;
		width:100%;
		margin:0 0 35px 0;
	}
	.navbar .btn-navbar{
		background:#999999;
		float:left;
		margin:10px 0 10px 0;
	}
	.navbar .btn-navbar span{
		margin:0;
		padding:0
	}
	ul.social-top{
		position:absolute;
		top:12px;
		right:20px;
		margin:0;
		padding:0;
	}
	.navbar-fixed-top,
	.navbar-fixed-bottom,
	.navbar-static-top {
		margin-right: 0;
		margin-left: 0;
	}
	.nav-collapse{
		width:100%;
	}
	.nav-collapse .nav > li > a{
		background:#999999;
		color:#fff;
		margin-bottom:1px;	
	}
	.nav-collapse .nav > li.active > a{
		color:#fff;
	}	
	.nav-collapse .nav > li > a,
	.nav-collapse .dropdown-menu a {
		padding: 9px 15px;
		font-weight: normal;
		color: #fff;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}	
	.navbar-inverse .nav-collapse .nav > li > a{
		color: #fff;
	}
	.navbar-inverse .nav-collapse .dropdown-menu a {
		background-color:#999999;
		color: #fff;
		margin:0 0 1px 0;
		padding-left:30px;
	}
	.navbar-inverse .nav li.dropdown.active > .dropdown-menu a {
		color:#fff;
	}
	.dropdown-menu {
		background:none;
		margin-bottom:1px;	
	}
	.dropdown-menu li .sub-menu{left:0;position:relative;top:0;visibility:visible;margin-top:1px;}
	.dropdown-menu li:hover .sub-menu{visibility:visible;}	
	.item-wrapper{
		width:100%;
	}
	.image-title h4{
		font-size:12px;
		line-height:12px;
	}	
	.span3 .image-title h4{
		font-size:12px;
		line-height:12px;
	}
	a.zoom{
		margin-top:3px;
	}
	.portfolio-metta{
		z-index:-9999;
	}
	.team-img{
		height:194px;
	}
	.team-desc{
		height:179px;
	}
	.team-desc h4{
		margin-top:15px;
	}
	.memnav .btn-group .dropdown-menu{
		background-color: #7d8289;
	}
	.grid-wrapper{
		font-size:24px;
		line-height:36px;
	}

	.grid-wrapper h3{
		font-size:90px;
		line-height:90px;
	}	
}

@media (max-width: 767px) {
	body {
		padding-right: 0;
		padding-left: 0;
	}
	.container{
		padding-right: 20px;
		padding-left: 20px;	
	}
	header{
		position:relative;
	}
	#featured{
		padding:0;
	}
	#page-header{
		padding:35px 0 35px 0;
	}
	#browse-menu ul li{
		float:left;
		width:100%;
		margin:0 0 35px 0;
	}
	.navbar .btn-navbar{
		background:#999999;
		float:left;
		margin:10px 0 10px 0;
	}
	.navbar .btn-navbar span{
		margin:0;
		padding:0
	}
	ul.social-top{
		position:absolute;
		top:12px;
		right:20px;
		margin:0;
		padding:0;
	}
	.navbar-fixed-top,
	.navbar-fixed-bottom,
	.navbar-static-top {
		margin-right: 0;
		margin-left: 0;
	}
	.nav-collapse{
		width:100%;
	}
	.nav-collapse .nav > li > a{
		background:#999999;
		color:#fff;
		margin-bottom:1px;	
	}
	.nav-collapse .nav > li.active > a{
		color:#fff;
	}	
	.nav-collapse .nav > li > a,
	.nav-collapse .dropdown-menu a {
		padding: 9px 15px;
		font-weight: normal;
		color: #fff;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}	
	.navbar-inverse .nav-collapse .nav > li > a{
		color: #fff;
	}
	.navbar-inverse .nav-collapse .dropdown-menu a {
		background-color:#999999;
		color: #fff;
		margin:0 0 1px 0;
		padding-left:30px;
	}
	.navbar-inverse .nav li.dropdown.active > .dropdown-menu a {
		color:#fff;
	}
	.dropdown-menu {
		background:none;
		margin-bottom:1px;	
	}
	.dropdown-menu li .sub-menu{left:0;position:relative;top:0;visibility:visible;margin-top:1px;}
	.dropdown-menu li:hover .sub-menu{visibility:visible;}	
	.item-wrapper{
		width:100%;
	}
	.login-register{
		float:left;
		margin-top:20px;
	}
	.image-wrapper iframe{
		height:250px;
	}
	.box-desc{
		margin-bottom:35px;
	}	
	.article-wrapper, aside{
		width:100%;
	}
	.team-wrapper{
		margin-bottom:35px;
	}
	.team-img{
		height:790px;
	}
	.team-desc{
		height:410px;
	}
	.team-desc h4{
		margin-top:380px;
	}
	.memnav{
		float:left;
		clear:both;
		margin-top:20px;
	}
	.memnav .btn-group .dropdown-menu{
		background-color: #7d8289;
		left:0;
	}
	.grid-wrapper p{
		display:none;
	}

	.grid-wrapper h3{
		font-size:62px;
		line-height:76px;
	}	
	#portfolio, #portfolio li{	width:100%}
}

@media (max-width: 480px) {
	.search-form{
		float:left;
		margin:20px 0 0 0;
	}
	.team-img{
		height:456px;
	}
	.team-desc{
		height:276px;
	}
	.team-desc h4{
		margin-top:180px;
	}
	.grid-wrapper p{
		display:none;
	}

	.grid-wrapper h3{
		font-size:42px;
		line-height:56px;
	}	
}

/*
STYLESWITCHER
=========================== */			
			
#panel {
	position:fixed;
	top: 50px;
	left:-230px;
	width: 230px;
	color: #fff;
    z-index: 5000;
    font-size: 11px;
	background:#181818;
}

#panel input{
	width:160px;
}

.colorpicker {
    z-index: 5001;	
}
.panel-inner {
	position: relative;
	width: 100%;
	height: 100%;
}
.options_box {
	margin:0;
	padding:0;
	overflow:hidden;
}

.options_box .solidline {
	margin-bottom:10px;
}

.options_box h6 {
	text-align:center;
	font-weight:bold;
	background:#333333;
	padding:14px 0 13px 0;
	margin-bottom:20px;
}


.options_box .layout{
	width: 190px;
	margin:0 20px 20px 20px;
}

.options_toggle_holder {
	position:absolute;
	right:-40px;
}

.options_toggle  {
	margin: 0 0 0 4px;
	padding:10px 5px 0 5px;
	width: 40px;
	height: 35px;
	cursor: pointer;
	border-left:none;
	display:block;
	background:#333333;
	font-size:28px;
	line-height:28px;
	text-align:center;
}
.options_toggle  i{
	margin:0;
	padding:0;
}


.options_toggle:hover,.options_toggle:focus,.options_toggle:active{
	outline:0;
	text-decoration:none;
}

#accent_color{
	color: #fff;
	border: none;
	text-transform: uppercase;
	margin-left: 2px;
	text-align: center;
	outline:0;
}


/* Theme Styler :: End */