/*
THEME NAME: Creaone
THEME URI: http://counterpart.x10.mx/html/creaone
DESCRIPTION: Creaone- One Page Responsive Portfolio Template
VERSION: 1.0
AUTHOR: <a href="http://www.wordpresstoblogger.info">Dilip Kumar</a>
AUTHOR URI: http://www.wordpresstoblogger.info
*/

@font-face {
    font-family: 'BPreplayRegular';
    src: url('BPreplay-webfont.eot');
    src: url('BPreplay-webfont.eot@#iefix') format('embedded-opentype'),
         url('BPreplay-webfont.woff') format('woff'),
         url('BPreplay-webfont.ttf') format('truetype'),
         url('BPreplay-webfont.svg#BPreplayRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BPreplayBold';
    src: url('BPreplayBold-webfont.eot');
    src: url('BPreplayBold-webfont.eot@#iefix') format('embedded-opentype'),
         url('BPreplayBold-webfont.woff') format('woff'),
         url('BPreplayBold-webfont.ttf') format('truetype'),
         url('BPreplayBold-webfont.svg#BPreplayBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Typicons';
	src: url('typicons-regular-webfont.eot');
	src: url('typicons-regular-webfont.eot@#iefix') format('embedded-opentype'),
		url('typicons-regular-webfont.woff') format('woff'),
		url('typicons-regular-webfont.ttf') format('truetype'),
		url('typicons-regular-webfont.svg#TypiconsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* 
   ------------------------------------------------------------------------------
	Global Styles
   ------------------------------------------------------------------------------		
*/

body {font-family: 'BPreplayRegular';}

a:link,a:visited,a:active {
	color:#24b2ea;
	outline: 0;
	text-decoration:none;
}

a:hover {
	color:#000;
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}

p {
	font-size: 12px;
	line-height: 20px;
	color:#939393;
}

.align-right { float:right; margin: 0 0 5px 20px; }
.align-left { float:left; margin: 0 20px 5px 0; }

.space10 {margin-bottom:10px;}
.space15 {margin-bottom:15px;}
.space20 {margin-bottom:20px;}
.space30 {margin-bottom:30px;}
.space40 {margin-bottom:40px;}
.space50 {margin-bottom:50px;}
.space60 {margin-bottom:60px;}
.space70 {margin-bottom:70px;}
.space80 {margin-bottom:80px;}

img {max-width: 100%;height: auto;}

.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 9px;
	height: 0;
	overflow: hidden;
}

.video iframe, .video object, .video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/* 
   ------------------------------------------------------------------------------
	Header Styles
   ------------------------------------------------------------------------------		
*/

.logo {
	padding:0px;
	margin:0 auto;
	height:60px;
	float:left;
	width:157px;
}

.logo h1 {
	padding:0px;
	margin:0 auto;
}

#header-wrap {
	background:#fff;
	-webkit-box-shadow: 0 3px 3px -1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 3px -1px rgba(0,0,0,0.2);
      box-shadow: 0 3px 3px -1px rgba(0,0,0,0.2);
	z-index:11;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	height:60px;
}

/* 
   ------------------------------------------------------------------------------
	Navmenu Styles
   ------------------------------------------------------------------------------		
*/

.navmenu {width:75%;float:right;}

ul.navigation {
	float:right;
	height:60px;
}

ul.navigation li {
	float: left;
	list-style-type: none;
	text-transform:uppercase;
	padding: 18px 15px;	
	font-family: 'BPreplayRegular';
}

ul.navigation  li a {
	color: #000;
	text-decoration: none;
	font-size: 12px;
	font-weight:400;
}

ul.navigation li a:hover, {
	color: #ff0000;
}

ul.navigation .current a {
	color: #ff0000;
}

.current {}

.select-menu {
	display: none;
	background: none;
	padding: none;
	border:none;
}

/* 
   ------------------------------------------------------------------------------
	Slider Caption Styles
   ------------------------------------------------------------------------------		
*/

.rsp-caption-left {
	width:100%;float:left;
	height:100%;
}

.rsp-caption-left img, .rsp-caption-right img {
	max-width:100%;
	height:auto;
	left:0px;
}

.rsp-caption-right {
	width:100%;float:right;
	height:100%;
	left:0px;
}

.rsp-caption-contentleft {
	width:50%;float:left;
	height:100%;
	margin-left:13%;
}

.rsp-caption-contentright {
	width:50%;float:right;
	height:100%;
}

.margin20 {margin-top:20%;}
.margin25 {margin-top:25%;}

.rsp-caption-contentright span, .rsp-caption-contentleft span{
	width:80%;
	float:left;
}

.rsp-caption-contentright span h4, .rsp-caption-contentleft span h4{
	font-size:35px;
	padding:10px 15px 5px 15px;
	font-weight:bold;
	color:#000;
	background:#f8f400;
	text-transform:uppercase;
	display:inline;
}

.rsp-caption-contentright span p, .rsp-caption-contentleft span p{
	font-size:17px;
	padding-top:15px;
	color:#fff;
	background:#2a2a2a;
	padding:10px 15px;
	display:inline;
	line-height:35px;
}

/* 
   ------------------------------------------------------------------------------
	Welcome Content Styles
   ------------------------------------------------------------------------------		
*/

.welcome-content {
	padding:30px 0;
	text-align:center;
	margin:0 0 0 0;
	background:#1a1a1a;
}

.welcome-content h2 {
	color:#fff;
      font-weight: 400;
      line-height: 38px;
	text-transform:uppercase;
	font-size:35px;
}

.welcome-content p {
	font-size:14px;
	margin-top:10px;
	color:#fff;
	line-height:22px;
}

/* 
   ------------------------------------------------------------------------------
	Inner Content Styles
   ------------------------------------------------------------------------------		
*/

.content {}

.page-content-last {padding: 0px;}
.page-content {padding: 70px 0;}

h3.content-title {
	text-transform:uppercase;
	color:#ddd;
	margin-bottom:20px;
	text-align:center;
	font-size:100px;
	font-family: 'BPreplayBold';
}

h3.content-title1 {
	text-transform:uppercase;
	color:#3a3a3a;
	margin-bottom:20px;
	text-align:center;
	font-size:100px;
	font-family: 'BPreplayBold';
}

.black {background:#1a1a1a;}

/* 
   ------------------------------------------------------------------------------
	Features Wrap Styles
   ------------------------------------------------------------------------------		
*/

.features-wrap{
	overflow: hidden;
}

.features-content{}

.features-content:hover{
	cursor:pointer;
}

.features-icon{
	position: relative;
}

.features-icon img{
	width:70px;
	height:70px;
}

.features-description{
	line-height:20px;
}

.features-description p{
	padding:5px 0;
}

.features-content h5{
	color:#333;
	font-weight:100;
	margin-top:15px;
}

/* 
   ------------------------------------------------------------------------------
	Services Content Styles
   ------------------------------------------------------------------------------		
*/

.services-content {
	padding:20px 0 3px 0;
	border-top:3px double #ddd;
	border-bottom:3px double #ddd;
}

.services-content p {
	font-size:14px;
	color:#000;
	line-height:22px;
}

.services-content p:hover {
	font-weight:bold;
	cursor:pointer;
}

.dropcap {
	background:#ff0000;
	color:#fff;
	padding:5px 10px;
	margin-right:15px;
	border-radius:100%;
}

/* 
   ------------------------------------------------------------------------------
	Features Wrap - Contact Styles
   ------------------------------------------------------------------------------		
*/

.contact_mail {text-align:center;}

.contact-content {
	padding:0px 0 0 0;
	text-align:center;
}

.contact-content h6 {
	color:#999;
	line-height:20px;
	font-size: 15px;
	background:#fff;
	display:inline-block;
	padding:5px 0;
	font-weight:100;
}

.contact-content p a{
	padding:10px 20px;
	color:#fff;
	line-height:20px;
	background:#2a2a2a;
	display:inline-block;
}

.contact-content p a:hover {
	background:#ff0000;
}

/* 
   ------------------------------------------------------------------------------
	Portfolio styles
   ------------------------------------------------------------------------------		
*/

.rworks-link {
	position:absolute;
	right:5px;
	bottom:0px;
	font-size:22px;
	color:#f8f400;
	font-family: "Typicons", sans-serif;
	font-weight:100;
}

.rworks-link:hover {
	color:#fff;
}

.portfolio_t {
	color:#fff;
	text-align:center;
	display:table;
	margin: 0 auto;
	font-weight:100;
	line-height:25px;
	border-top:3px double #2a2a2a;
	border-bottom:3px double #2a2a2a;
	padding:15px 0;
}

.portfolio_tw {
	color:#828282;
	text-align:center;
	display:table;
	margin: 0 auto;
	font-weight:100;
	line-height:25px;
	border-top:3px double #ddd;
	border-bottom:3px double #ddd;
	padding:15px 0;
}

/* 
   ------------------------------------------------------------------------------
	Aboutus page styles
   ------------------------------------------------------------------------------		
*/

.team {}

.team_user img { border:2px solid #1e1e1e;}

.team h4{
	color:#fff;
	line-height:22px;
	font-size: 15px;
	font-weight: 600;
	text-transform:uppercase;
	border-bottom:3px double #2a2a2a;
	padding:0 0 15px;
	margin-top:0px;
	margin-bottom:20px;
}

.team p {
	margin-bottom:15px;
	font-size:13px;
}

/* 
   ------------------------------------------------------------------------------
	Progressbar styles
   ------------------------------------------------------------------------------		
*/

#skills {
	list-style:none;
	padding-top:20px;
	width:100%;
	overflow:hidden;
}
 
#skills li {
	margin-bottom:25px;
	height:26px;
}
 
#skills li span {
	max-width:93%;
	border-radius:2px;
}
 
#skills li em {
	position:relative;
	top:0px;
	color:#fff;
	padding:4px 10px;
	font-size:13px;
	font-weight:700;
	text-shadow:0px -1px 0px rgba(0,0,0,0.1);
	font-family: 'Open Sans', sans-serif;
	font-style:Normal;
}
 
.spread {
	height:26px;
	margin-top:-3px;
	position:absolute;
}
 
.photoshop{background:#ff9108;width:100%; -moz-animation:photoshop 2s ease-out;      -webkit-animation:photoshop 2s ease-out;    }
.html{background:#e10052; width:75%; -moz-animation:html 2s ease-out;    -webkit-animation:html 2s ease-out;  }
.css{ background:#a0e0a9;width:60%; -moz-animation:css 2s ease-out;    -webkit-animation:css 2s ease-out;  }
.javascript{ background:#00ada7;width:45%; -moz-animation:javascript 2s ease-out;    -webkit-animation:javascript 2s ease-out;  }
 
@-moz-keyframes photoshop{ 0%  { width:0px;} 100%{ width:100%;}  }
@-moz-keyframes html{ 0%  { width:0px;} 100%{ width:75%;}  }
@-moz-keyframes css{ 0%  { width:0px;} 100%{ width:60%;}  }
@-moz-keyframes javascript{ 0%  { width:0px;} 100%{ width:45%;}  }
 
@-webkit-keyframes photoshop{ 0%  { width:0px;} 100%{ width:100%;}  }
@-webkit-keyframes html{ 0%  { width:0px;} 100%{ width:75%;}  }
@-webkit-keyframes css{ 0%  { width:0px;} 100%{ width:60%;}  }
@-webkit-keyframes javascript{ 0%  { width:0px;} 100%{ width:45%;}  }


/* 
   ------------------------------------------------------------------------------
	Clients wrap styles
   ------------------------------------------------------------------------------		
*/

.cwrap { padding-top:20px;border-top:3px double #2a2a2a;}
.clients {}
.clients ul.items {overflow:hidden;}

.clients ul.items img {
	opacity:0.5;
	filter: alpha(opacity = 50);
}

.clients ul.items li {
	padding: 5px 0;
}

.clients ul.items li img {
	display: block;
	width:200px;
	margin: 0 auto;
	opacity:0.4;
	filter: alpha(opacity = 40);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
	-webkit-transition:all 0.5s ease-in-out;  
	-moz-transition:all 0.5s ease-in-out;  
	-o-transition:all 0.5s ease-in-out;  
	transition:all 0.5s ease-in-out; 
}

.clients ul.items li img:hover {
	filter: none;
	-webkit-filter: grayscale(0%);
	opacity:1;
}

/* 
   ------------------------------------------------------------------------------
	Contact Details styles
   ------------------------------------------------------------------------------		
*/

.contacts {
	padding:0px;
	margin: 0px;
}

.contacts-content {
	padding:30px 0;
	margin:0 0 0 0;
	background:#ff0000;
}

.contact-details div{
	text-transform:uppercase;
	color:#fff;
	font-size:14px !important;
}


.span-ico {
	margin-right:15px;
	color:#ff0000;
	font-family: 'Typicons';
	font-size:12px;
	text-transform:none;
	background:#fff;
	padding:6px 5px 2px 5px;
	border-radius:100%;
}

/*-----------------------------------------------------------------------------------*/
/* CONTACT FORM CONTENT STYLES
/*-----------------------------------------------------------------------------------*/

.map-placeholder {}

#contact-wrap {
	background:#fff;
	position:absolute;
	left:0px;
	right:0px;
	bottom:50px;
	padding:20px 40px 35px 30px;
	margin: 0 auto;
	box-shadow: 0 0 8px #aaa;
	-moz-box-shadow: 0 0 8px #aaa;
	-webkit-box-shadow: 0 0 8px #aaa;
	width:85%;
	margin: 0 auto;
}

#contactForm {
	width: 100%;
	height: auto;
	padding: 0;
}

#contactForm.positioned {}

.statusMessage, .successmessage, .errormessage {
	display: none;
	margin: auto;
	width: 100%;
	height: auto;
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	background:#fff;
	margin: 0 auto;
	box-shadow: 0 0 8px #aaa;
	-moz-box-shadow: 0 0 8px #aaa;
	-webkit-box-shadow: 0 0 8px #aaa;
}

.statusMessage p {
	margin: 0;
	padding:20px;
	color:#000;
}

.successmessage p {
	margin: 0;
	padding:20px;
	color:#000;
}

.success-ico {
	color:#00b034;
	font-size:25px;
	float:left;
	padding-right:10px;
	font-family: 'Typicons';
	margin-top:3px;
}

.error-ico {
	color:#ff0000;
	font-size:25px;
	float:left;
	padding-right:10px;
	font-family: 'Typicons';
	margin-top:3px;
}

.errormessage p {
	margin: 0;
	padding:20px;
	color:#000;
}

#contactForm ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#contactForm ul li {
	margin: .9em 0 0 0;
	padding: 0;
}

#contactForm input, #contactForm label {line-height: 1em;}

label {
	display: block;
	clear: left;
	width: 100%;
	padding-bottom:15px !important;
	font-weight: 600;
	text-transform:uppercase;
	font-size:12px;
	font-family: 'Open Sans', sans-serif;
	color:#000;
}

input, textarea {
	display: block;
	margin-bottom:20px;
	padding: 8px 5px;
	width: 100%;
	font-family: "Helvetica", serif;
	font-size: 12px;
	border: 1px solid #ddd;
	border-top:1px solid #ccc;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;    
	border-radius: 3px;
	-moz-box-shadow: rgba(0,0,0,.1) 0 1px 4px inset;
	-webkit-box-shadow: rgba(0,0,0,.1) 0 1px 4px inset;
	box-shadow: rgba(0,0,0,.1) 0 1px 4px inset;
	background: #fff;
	color:#aaa;
}

textarea {
	height: 13em;
	line-height: 1.5em;
	resize: none;
}

#contactForm *:focus {
	border: 1px solid #bbb;
	outline: none;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

input:valid, textarea:valid {}

input[type="submit"], input[type="button"] {
	float: left;
	margin: 5px 8px 0 0;
	width: 110px;
	padding: .5em;
	border: 1px solid #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;  
	border-radius: 3px;
	color: #fff;
	background: #000;
	font-size: 12px;
	line-height: 1em;
	font-weight: bold;
	opacity: .7;
	-webkit-appearance: none;
	-moz-transition: opacity .5s;
	-webkit-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:active {
	cursor: pointer;
	opacity: 1;
}

input[type="submit"]:active, input[type="button"]:active {color: #333;background: #2a2a2a;}
input[type="button"] {background: #ff0000;}

/* 
   ------------------------------------------------------------------------------
	Footer styles
   ------------------------------------------------------------------------------		
*/

.footer {padding:30px 0 10px 0;}
.footer p{text-align:center;color:#333;font-size:14px;}

/* 
   ------------------------------------------------------------------------------
	Footer Social styles
   ------------------------------------------------------------------------------		
*/

.social {
	width:176px;
	margin: 0 auto;
}

ul.social-networks {
	overflow:hidden;
}

ul.social-networks li {
	float:left;
	margin:8px 2px 0 2px;
	border:none;
}

.icon-twitter a,
.icon-facebook a,
.icon-flickr a,
.icon-dribbble a {
	float:left;
	background:url(../images/social-sprite.png) no-repeat left bottom;
	text-indent:8000px;
	width:40px;
	height:40px;
	-webkit-transition:all 0.3s ease-in-out;  
	-moz-transition:all 0.3s ease-in-out;  
	-o-transition:all 0.3s ease-in-out;  
	transition:all 0.3s ease-in-out; 
}

.icon-twitter a:hover,
.icon-facebook a:hover,
.icon-flickr a:hover,
.icon-dribbble a:hover {
	background:url(../images/social-sprite.png) no-repeat left top;
	-webkit-transition:all 0.3s ease-in-out;  
	-moz-transition:all 0.3s ease-in-out;  
	-o-transition:all 0.3s ease-in-out;  
	transition:all 0.3s ease-in-out; 
}

.icon-twitter, .icon-twitter a {background-position:-0px top;}
.icon-twitter a:hover {background-position:-0px bottom;}

.icon-facebook, .icon-facebook a {background-position:-40px top;}
.icon-facebook a:hover {background-position:-40px bottom;}

.icon-dribbble, .icon-dribbble a {background-position:-80px top;}
.icon-dribbble a:hover {background-position:-80px bottom;}

.icon-flickr, .icon-flickr a {background-position:-120px top;}
.icon-flickr a:hover {background-position:-120px bottom;}

/* 
   ------------------------------------------------------------------------------
	Twitterfeed styles
   ------------------------------------------------------------------------------		
*/

.twitter-wrap {background:#00aeef;
}

.twitter-feed {
	padding:0px;
	position:relative;
	display:block;
	width:100%;	
	padding:10px 0 20px 0;
	text-align:center;
}

ul#twitter_update_list {
	margin:0px;
	padding:0px 35px;
	list-style:none;
}

ul#twitter_update_list li {
	padding:0px 0px 5px 0px;
	margin:0px;
	display:none;
}

.twitter-feed span {
	font-size:13px;
	color:#fff;
	display:block;
	line-height:1.3em;
}

.twitter-feed span a {
	color:#000;
	text-decoration:none;
}

.twitter-feed span a:hover {
	color:#000;
	border-bottom:1px dotted #00aeef;
}

.twitter-feed a {
	color:#80d7f7;
	text-decoration:none;
}

.twitter-feed a:hover {
	color:#80d7f7;
	text-decoration:none;
}

.twitter-bird {
	background:url(../images/twitter_bird.png) no-repeat center;
	height:37px;
	position:relative;
	width:35px;
	margin: 0 auto;
	top:-17px;
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

	.services-content p {font-size:12px;line-height:20px;}
	.services-content p:hover {font-size:10px;line-height:20px;font-weight:bold;}
	.rsp-caption-contentleft {width:70%;float:left;height:100%;	margin-left:13%;}
	.rsp-caption-contentright {width:70%;float:right;height:100%;}
	.rsp-caption-contentright span h4, .rsp-caption-contentleft span h4{font-size:23px;}
	.rsp-caption-contentright span p, .rsp-caption-contentleft span p{font-size:13px;color:#fff;padding:10px 15px;display:inline;line-height:20px;}
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

	.navmenu {width:40%;}
	.rsp-caption-contentleft {width:100%;float:left;height:100%;margin-left:1%;}
	.rsp-caption-contentright {width:100%;float:right;height:100%;}
	.rsp-caption-contentright span, .rsp-caption-contentleft span{width:100%;float:left;}
	.rsp-caption-contentright span h4, .rsp-caption-contentleft span h4{font-size:12px;padding:5px 15px 5px 15px;}
	.rsp-caption-contentright span p, .rsp-caption-contentleft span p{font-size:8px;}
	.margin20 {margin-top:16%;}
	.margin25 {margin-top:22%;}
	.features-content{text-align:center;}
	ul.navigation { display: none;margin:0;}
	.select-menu {display: block;	background: #fff;	width: 100%;padding: 5px;font-size: 12px;border: 1px solid #ccc;height: 34px;margin-top:10px;}
	.welcome-content h2 {font-size:27px;line-height: 31px;}
	.welcome-content p {font-size:12px;line-height:20px;}
	h3.content-title {font-size:60px;}
	h3.content-title1 {font-size:60px;}
	.contact-details div{font-size:12px !important;padding-top:10px;padding-bottom:10px;}
	#contact-wrap {width:90%;}
	.welcome-content {padding:20px 0;}
	.team h4{margin-top:15px;}
}


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.navmenu {width:45%;}
	.features-content{text-align:center;}
	.rsp-caption-contentleft {width:70%;float:left;height:100%;margin-left:2%;}
	.rsp-caption-contentright {width:70%;float:right;height:100%;}
	.margin20 {margin-top:16%;}
	.margin25 {margin-top:24%;}
	.rsp-caption-contentright span h4, .rsp-caption-contentleft span h4{font-size:22px;}
	.rsp-caption-contentright span p, .rsp-caption-contentleft span p{font-size:11px;color:#fff;padding:10px 15px;display:inline;line-height:20px;}
	ul.navigation { display: none;margin:0;}
	.select-menu {display: block;background: #fff;width: 100%;padding: 5px;font-size: 12px;border: 1px solid #ccc;height: 34px;margin-top:10px;}
}

.clearfix:before,.clearfix:after,.row:before,.row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.row:after,.clearfix:after {
	clear: both; 
}

.row,.clearfix {
	zoom: 1; 
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}