/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
body{
	padding:0;
	font-family: 'Lato', sans-serif;
	background:#000;
	margin: 8em 0;
}
body a{
    transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
input[type="button"],input[type="submit"]{
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
h1,h2,h3,h4,h5,h6{
	margin:0;			   
}	
p{
	margin:0;
}
ul{
	margin:0;
	padding:0;
}
label{
	margin:0;
}
/*-----start-header----*/
.header h1 {
	color: #fff;
	font-size: 3em;
	font-weight: 700;
	border: 4px solid #fff;
	width: 33%;
	margin: 0px auto;
	padding: 10px;
	font-family: 'Montserrat', sans-serif;
}
.header h1 a {
	color:#fff;
	text-decoration:none;
	display:block;
}
.header p {
	color:#fff;
	font-size:1.5em;
	letter-spacing:2px;
	font-weight:400;
	font-family: 'Montserrat', sans-serif;
	margin-top:1em;
}
.header {
	margin-bottom: 8em;
}
.temp-head {
	background:#198a88;
	padding-top:1.8em;
	min-height: 100px;
}
.temp-head h4 {
	color:#fff;
	font-size:1.6em;
	font-weight:600;
	margin-bottom:3px;
}
.temp-head p {
	color:#fff;
	font-size:1.2em;
}
.temp-in-left {
	float:left;
	padding:1em;
}
.temp-in {
	padding:4em 5em;
	background:#191919;
}
.temp-in-left h2 {
	color: #fff;
	font-size: 5em;
	font-weight: 400;
	margin-top: 10px;
}
.temp-in-right {
	float:right;
	padding:1em;
	width: 33%;
}
.temp-in-right img {
	width:100%;
}
.temp-in p {
	color:#575757;
	font-size:1.2em;
	font-weight:400;
	line-height:1.6em;
	text-align:center;
	margin-top:1em;
}
.skills {
	width: 85%;
	margin: 5px 0;
	height: 18px;
	background:#191919;
	float:left;
}
.skills h4 {
	color: #000;
	font-size: 2.2em;
	padding: 8px 0 0 15px;
	text-transform: uppercase;
	font-weight: 400;
}
.skill1 {
	height: 100%;
	display: block;
	background-color: #d78716;
}
.percentage{
	float:right;
	width:15%;
}
.percentage h4 {
	color: #fff;
	font-size: 1.4em;
	margin: 2px 0 0 23px;
	font-weight: 500;
}
.login-form {
	margin-top:3em;
}
.left-form{
	width:80%;
	float:left;
}
.vertical-scroll {
	float: right;
	width: 20%;
}
.form {
	padding: 1.5em 3em;
	background: #191919;
	margin-top:3em;
}
.form input[type="text"] {
	width: 100%;
	color: #fff;
	background: #191919;
	outline: none;
	font-size: 1.3em;
	padding:1em 0;
	border: none;
	-webkit-appearance: none;
}
.form  input[type="password"] {
	width: 100%;
	color: #fff;
	background: #191919;
	outline: none;
	font-size: 1.3em;
	padding:1.3em 0;
	border: none;
	-webkit-appearance: none;
}
.form input[type="submit"] {
	border: none;
	outline: none;
	color: #FFF;
	padding: 0.6em;
	font-size: 1.3em;
	font-weight: 500;
	margin: 1.3em 0 0 0;
	-webkit-appearance: none;
	background: #198a88;
	border: none;
	width: 100%;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
.form input[type="submit"]:hover {
	background: #d78716;
}
.check{
	margin: .5em 0;
}
.checkbox {
	margin-bottom: 4px;
	padding-left: 30px;
	font-size: 1.1em;
	line-height: 27px;
	cursor: pointer;
}
.checkbox {
	position: relative;
	font-size: 1.2em;
	color: #fff;
	font-weight: 400;
}
.checkbox:last-child {
	margin-bottom: 0;
}
.checkbox i {
	position: absolute;
	bottom: 4px;
	left: 17.5em;
	display: block;
	width: 19px;
	height: 19px;
	outline: none;
	border: 1px solid #97A2A8;
}
.checkbox i.left {
	position: absolute;
	bottom: 4px;
	left: 0;
	display: block;
	width: 19px;
	height: 19px;
	outline: none;
	border: 1px solid #97A2A8;
}
.checkbox input + i:after {
	content: '';
	background: url("../images/tick-mark.png") no-repeat 1px 2px;
	top: 4px;
	left: 2px;
	width: 15px;																																																																																													
	height: 15px;
	font: normal 12px/16px FontAwesome;																																						
	text-align: center;
}					
.checkbox input + i:after {
	position: absolute;
	opacity: 0;
	transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-webkit-transition: opacity 0.1s;
}
.checkbox input {
	position: absolute;
	left: -9999px;
}
.checkbox input:checked + i:after {
	opacity: 1;
}
.ckeck-bg{
	position:relative;
	min-height: 215px;
}
.checkbox-form input[type="submit"] {
  border: none;
  outline: none;
  color: #FFF;
  padding: .7em 2em;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 1em 0 0 0;
  -webkit-appearance: none;
  background: #2a99d6;
}
.checkbox-form input[type="submit"]:hover{
	background:#2b3e4e;
	color:#FFF;
	  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
}
.form a {
	color: #fff;
	font-size: 1.2em;
	font-weight: 500;
	text-decoration: underline;
	text-align: Center;
	display: block;
	padding: 2em 0 0.6em 0;
}
/* start equalizer */
.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}
#eq {
	text-align:center;
} 
#eq span {
	height:430px; 
	display:inline-block;
	background: #d78716;
	width: 7px;
}
.wrp-eq {
	margin: 0 auto;
}
.ui-slider-vertical {
	width: 8px;
}
.ui-slider-vertical .ui-slider-range-min {
	background: #fff;
}
.ui-slider-vertical .ui-slider-handle {
	left: -7px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	outline: none;
	cursor: pointer;
	background: #d78716;
}
.ui-corner-all {
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
}
.herz {
	width: 397px;
	margin: 0 auto;
	padding-top: 20px;
}
.herz div {
	float: left;
	color: #A55C00;
	width: 44px;
	text-align: center;
	font-size: 12px;
	text-shadow: 1px 1px 0px #242424;
}
/* end	equalizer */
.tabs-play-list {
	margin-top:3em;
	background:#171717;
	padding: 2em;
}
/*--audio--*/
.audio-top{
	background:#fff;
	padding:2em;
	text-align:center;
	border-bottom-right-radius:3px;
	-webkit-border-bottom-right-radius:3px;
	-moz-border-bottom-right-radius:3px;
	-o-border-bottom-right-radius:3px;
	-ms-border-bottom-right-radius:3px;
	border-bottom-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-o-border-bottom-left-radius:3px;
	-moz-border-bottom-left-radius:3px;
	-ms-border-bottom-left-radius:3px;
}
.play-song h3 {
	color: #fff;
	font-size: 1.7em;
	font-weight: 500;
	margin-top:0.5em;
}
.play-song p{
	color:#fff;
	font-size:1.2em;
	font-weight:300;
	margin-top:0.3em;
}
.next-top{
	position: relative;
	z-index:0;
}
.next-top li{
	display:inline-block;	
}
.next-top li i{
	background: url(../images/pn.png)no-repeat 0px 0px ;
	width: 20px;
	height: 20px;
	display: inline-block;
	position: absolute;
	top: -15px;
	left: 31%;
}
.next-top li i.next{
	background-position: -20px 0px;
	left: 55%;
}
.audio-grid h5{
	color:#000;
	font-size:1.5em;
	padding:0.3em 0 0 ;
	font-weight: 500;
}
.audio-grid p{
	color:#878787;
	font-size:1em;
}
.top-audio img{
	border-top-right-radius:3px;
	-webkit-border-top-right-radius:3px;
	-o-border-top-right-radius:3px;
	-moz-border-top-right-radius:3px;
	-ms-border-top-right-radius:3px;
	border-top-left-radius:3px;
	-webkit-border-top-left-radius:3px;
	-o-border-top-left-radius:3px;
	-moz-border-top-left-radius:3px;
	-ms-border-top-left-radius:3px;
}
.top-audio{
	box-shadow:0px 0px 12px #b0cae7;	
}
.play-list img {
	width: 13%;
	float: left;
	margin-right: 6%;
	margin-top:1em;
}
.play-list a {
	float:left;
	color:#fff;
	font-size:1.1em;
	margin-top:1.8em;
}
.content-middle {
	background: #191919;
	padding: 2em 3em 2em 3em;
	margin:3em 0;
}
.content-middle-top{
	margin-bottom:2em;
}
div#dd1 span img {
	cursor: pointer;
}
a.posts {
	float:right;
}
.content-middle-info a {
	margin-top: 2em;
	display: block;
}
.content-middle-info h3 {
	color:#fff;
	font-size:1.6em;
	font-weight:900;
	letter-spacing:2px;
	margin-bottom:1.2em;
}
.content-middle-info p {
	color:#fff;
	font-size:1.2em;
	font-weight:300;
	line-height:1.7em;
	width:80%;
	margin:0 auto;
}
.search-box {
	position: relative;	
	background: #191919;
}
.search-box form input[type="text"]   {
	border: none;
	outline: none;
	padding: 15px 0 15px 15px;
	-webkit-apperance: none;
	margin: 0;
	background: #191919;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	color: #696969;
	width: 87%;
	font-size:1.2em;
	letter-spacing:1px;
	font-weight:400;
	
}
.search-box form input[type="submit"] {
	border: none;
	outline: none;
	cursor: pointer;
	background: url(../images/search.png) no-repeat 0px 0px #191919;
	position: absolute;
	right: 13px;
	bottom: 13px;
	padding: 0;
	width: 25px;
	height: 25px;
	font-size: 0;
}
.to-do h3 {
	color:#fff;
	background:#a62424;
	font-size:1.4em;
	font-weight:600;
	padding:0.7em 0;
	text-align:center;
	letter-spacing:1px;
	margin-bottom:1.5em;
}
.to-do {
	margin-top:2em;
	background: #191919;
	padding-bottom: 2.7em;
}
/***** Messages *************/
.wrapper-dropdown-2,.wrapper-dropdown-3 {
    position: relative;
	outline: none;
	float: right;
	background: #198a88;
	width:10%;
	min-height:60px;
}
.wrapper-dropdown-1{
	position: relative;
	outline: none;
	float: left;
}
.wrapper-dropdown-3 .dropdown{
	width:250px;
	/* Size & position */
    position: absolute;
    right: 0px;
    /* Styles */
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    list-style: none;
    z-index:1;
    background-color: #FFF;
	-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
	-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
	-o-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}
.wrapper-dropdown-1 .dropdown{
  width: 200px;
  position: absolute;
  right: -169px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  list-style: none;
  z-index: 1;
  background-color: #FFF;
  -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
  -o-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
  max-height: 0;
  overflow: hidden;
}
.wrapper-dropdown-2 .dropdown {
  /* Size & position */
    position: absolute;
    width:225px;
   top: 52px;
  right: 10px;
    /* Styles */
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    list-style: none;
    z-index:1;
    background-color: #FFF;
	-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
	-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
	-o-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.47);

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}
.wrapper-dropdown .dropdown li {
    position: relative; /* Enable absolute positioning for checkboxes */
}
.wrapper-dropdown-1 .dropdown li,.wrapper-dropdown-2 .dropdown li,.wrapper-dropdown-3 .dropdown li,.wrapper-dropdown-4 .dropdown li{
	border-bottom: 1px solid #F0F0F0;
	float: none;
	margin: 0;
	  width: 100%;
}
.wrapper-dropdown-1 .dropdown li,.wrapper-dropdown-3 .dropdown li{
}
.wrapper-dropdown-1 .dropdown li:hover,.wrapper-dropdown-3 .dropdown li:hover {
	background:#FDFDFD;
}
.odd{
}
.wrapper-dropdown-1 .dropdown li:last-child,.wrapper-dropdown-3 .dropdown li:last-child,.wrapper-dropdown-2 .dropdown li:last-child{
	border-bottom:none;
}
.wrapper-dropdown-1 .dropdown li a,.wrapper-dropdown-2 .dropdown li a,.wrapper-dropdown-3 .dropdown li a {
    display: block;
	text-decoration: none;
	color:#757575;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	border-radius: 0;
    border: none;
	font-size: 0.95em;
  padding: 12px;
}
/* Active state */
.wrapper-dropdown-1.active:after,.wrapper-dropdown-2.active:after,.wrapper-dropdown-3.active:after{
    border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-1.active .dropdown,.wrapper-dropdown-2.active .dropdown,.wrapper-dropdown-3.active .dropdown {
   max-height: 400px;   
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	text-align:left;
}
.graph-head h3 {
	  text-align: center;
	color: #fff;
	font-size: 1.8em;
	font-weight: 600;
	background: #198a88;
	padding-top: 0.65em;
	float: left;
	width: 90%;
	min-height: 60px;
}	
div#dd span img {
	margin: 1em 0 0 2em;
	cursor:pointer;
}
.circles-grid {
	margin:5em 2em 4em 2em;
}
.circle-left {
	float:left;
	width:48%;
	margin-right:4%;
}
.circle-right {
	float:right;
	width:48%;
}
.span_3_of_3 {
	margin:2em 0 0 2em;
}
.footer {
	padding-top:7em;
}
.copy-rights p {
	color:#fff;
	font-size:1.1em;
	font-weight:400;
}
.copy-rights p a {
	color:#198a88;
	margin-left:5px;
}
/*----*/
.circliful {
    position: relative; 
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
    width: 100%;
    position: absolute;
    text-align: center;
    display: inline-block;
}
.circle-info, .circle-info-half,.circle-text {
	color: #fff;
	font-weight: 700;
}
.circliful .fa {
	margin: -10px 3px 0 3px;
	position: relative;
	bottom: 4px;
}
.circles-text-wrp {
	font-size: 3em !important;
	color:#fff  !important;
}
/*-- responsive-design starts-here --*/

@media screen and (max-width: 1366px) {
	.header {
		margin-bottom: 6em;
	}
	body {
		margin: 7em 0 6em 0;
	}
	.footer {
		padding-top: 6em;
	}
}
@media screen and (max-width: 1280px) {
	.header h1 {
		font-size: 2.8em;
		width: 32%;
	}
	.footer {
		padding-top: 5em;
	}
	.vertical-scroll {
		width: 12%;
	}
	.left-form {
		width: 82%;
	}
	.temp-in {
		padding: 3em 5em;
	}
	.span_3_of_3 {
		margin: 3em 0 0 2em;
	}
}
@media screen and (max-width: 1024px) {
	.header h1 {
		font-size: 2.5em;
		border: 3px solid #fff;
		width: 34%;
	}
	.header p {
		font-size: 1.4em;
		margin-top: 0.8em;
	}
	body {
		margin: 6em 0 5em 0;
	}
	.temp-in {
		padding: 2em 3em;
	}
	.header {
		margin-bottom: 5em;
	}
	.temp-head {
		padding-top: 1.5em;
		min-height: 85px;
	}
	.temp-in-left h2 {
		font-size: 4.7em;
	}
	div#dd span img {
		margin: 1em 0 0 1em;
	}
	.checkbox {
		padding-left: 25px;
	}
	.checkbox i {
		left: 14em;
	}
	.play-song h3 {
		font-size: 1.5em;
	}
	.play-song p {
		font-size: 1.1em;	
		margin-top: 0.1em;
	}
	.next-top li i {
		top: 5px;
		left: 28%;
	}
	.tabs-play-list {
		padding: 1em 1em 4em 1em;
	}
	.circles-grid {
		margin: 4em 0em 4em 0em;
	}
}
@media screen and (max-width: 768px) {
	.circles-grid {
		margin: 4em 3em 4em 5em;
	}
	.header h1 {
		width: 43%;
	}
	.temp-in-right {
		width: 27%;
	}
	.temp-in-left h2 {
		font-size: 6.7em;
	}
	.span_3_of_3 {
		margin: 3em 0 0 13em;
	}
	.content-middle-info p {
		width: 100%;
	}
	.checkbox i {
		left: 38em;
	}
	.search-box {
		margin-top: 2em;
	}
}
@media screen and (max-width: 640px) {
	.header h1 {
		width: 46%;
		font-size: 2.2em;
		padding: 8px;
	}
	.header p {
		font-size: 1.3em;
		margin-top: 0.7em;
	}
	body {
		margin: 5em 0 4em 0;
	}
	.header {
		margin-bottom: 4em;
	}
	.circles-grid {
		margin: 3em 2em 3em 2em;
	}
	.checkbox i {
		left: 31em;
	}
	.footer {
		padding-top: 4em;
	}	
	.content-middle {
		padding: 2em 2em 2em 2em;
	}
	.temp-in-left h2 {
		font-size: 5em;
	}
	.span_3_of_3 {
		margin: 3em 0 0 9em;
	}
}
@media screen and (max-width: 480px) {
	.circle-left {
		width: 100%;
		margin-right: 0%;
		margin-bottom:3em;
	}
	.circle-right {
		width: 100%;
	}
	.circles-grid {
		margin: 3em 2em 3em 6em;
	}
	.header h1 {
		width: 57%;
		font-size: 2em;
		padding: 7px;
		border: 2px solid #fff;
	}
	.header p {
		font-size: 1.2em;
	}
	.temp-head {
		padding-top: 1em;
		min-height: 65px;
	}
	.temp-head h4 {
		font-size: 1.4em;
		margin-bottom: 2px;
	}
	.temp-head p {
		font-size: 1em;
	}
	.temp-in-left h2 {
		font-size: 3.2em;
		margin-top: 5px;	
	}	
	.temp-in p {
		font-size: 1.1em;
		margin-top: 0.7em;
	}
	.form {
		padding: 1.5em 2em;
	}
	.span_3_of_3 {
		margin: 3em 0 0 4em;
	}
	.checkbox i {
		left: 21em;
	}
	.copy-rights p {
		font-size: 1em;
	}
	body {
		margin: 4em 0 3em 0;
	}
	.footer {
		padding-top: 3em;
	}
	.graph-head h3 {
		font-size: 1.5em;
		padding-top: 0.6em;
		min-height: 50px;
	}
	div#dd span img {
		margin: 0.8em 0 0 0em;
	}
	.wrapper-dropdown-2, .wrapper-dropdown-3 {
		min-height: 50px;
	}
	div#recipes {
		padding: 1em! important;
	}
	.content-middle-info p {
		font-size: 1em;
	}
	.content-middle-info h3 {
		font-size: 1.3em;
		margin-bottom: 1em;
	}
	.content-middle-info a {
		margin-top: 1em;
	}
	.content-middle {
		padding: 1.5em 1em 1em 1em;
	}
}
@media screen and (max-width: 320px) {
	.header h1 {
		width: 73%;
		font-size: 1.6em;
		padding: 6px;
	}
	body {
		margin: 3em 0 2em 0;
	}
	.header p {
		font-size: 1em;
	}
	.header {
		margin-bottom: 3em;
	}
	.span_1_of_1,.span_1_of_2 {
		padding: 0;
	}	
	.circles-grid {
		margin: 3em 2em 0em 1.5em;
	}
	.span_3_of_3 {
		margin: 2em 0px 0 -1em;
	}
	.checkbox i {
		left: 16em;
	}
	.play-song h3 {
		font-size: 1.2em;
	}
	.next-top li i.next {
		left: 65%;
	}
	.next-top li i {
		left: 24%;
	}
	.play-list a {
		font-size: 1em;
		margin-top: 1em;
	}
	div#dd span img {
		margin: 0.5em 0.3em 0 0em;
		width: 100%;
	}
	.col-md-12 {
		padding: 0;
	}
	.graph,.content-bottom-right {		
		padding: 0;
	}
	.graph-head h3 {
		width: 86%;
	}
	.wrapper-dropdown-2, .wrapper-dropdown-3 {
		width: 14%;
		padding:10px;
	}
	.copy-rights p {
		line-height: 1.8em;
	}
	.temp-in {
		padding: 1em 1em;
	}
	.temp-in-right {
		width: 36%;
	}
	.temp-in p {
		font-size: 1em;
	}
	.checkbox {
		font-size: 1em;
	}
	.form {
		padding: 1em 1em;
	}
	.vertical-scroll {
		width: 6%;
	}
	#eq span {
		height: 407px;
	}
}