/*
 Theme Name: SPRDH 
 Theme URI: www.sprdh.com
 Author: SPRDH
 Author URI: sprdh.com
 Description: SPRDH WEBS & APPS
 Version: 2.0
 Tags: sprdh,webs,apps
 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
	text-decoration: none;
	outline: none;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
header, section, article, aside, nav, footer, address {
	display: block;
}
body {
	font-family:'open_sanslight',Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #555;
}
@font-face {
	font-family: 'open_sanslight';
	src: url('fonts/opensans-light-webfont.eot');
	src: url('fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-light-webfont.woff') format('woff'), url('fonts/opensans-light-webfont.ttf') format('truetype'), url('fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'open_sanssemibold';
	src: url('fonts/opensans-semibold-webfont.eot');
	src: url('fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/opensans-semibold-webfont.woff') format('woff'), url('fonts/opensans-semibold-webfont.ttf') format('truetype'), url('fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'gotham_extralightregular';
    src: url('fonts/ufonts.com_gotham_extralight-webfont.eot');
    src: url('fonts/ufonts.com_gotham_extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ufonts.com_gotham_extralight-webfont.woff') format('woff'),
         url('fonts/ufonts.com_gotham_extralight-webfont.ttf') format('truetype'),
         url('fonts/ufonts.com_gotham_extralight-webfont.svg#gotham_extralightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
input,textarea{
	font-family:'open_sanslight',Arial, Helvetica, sans-serif;
}
p{
	line-height:1.6em;
}
.hidden{
	display:none;
}
.left {
	float: left;
}
.right {
	float: right;
}
br.clear {
	clear: both;
	line-height: 0;
}
.wrapper {
	width: 90%;
	margin: 0 auto;
	max-width:1200px;
}
header{
	height: 120px;
	position: relative;
}
header nav{
	margin-top: 60px;	
}
header nav ul{
	float: left;
	width:100%;
}
header nav.left ul li{
	float: left;
	margin-right: 20%;
}
header nav.left ul li:last-child{
	margin-right: 0;
}
header nav.right ul li{
	float: right;
	margin-left: 17%;
}
header nav.right ul li:last-child{
	margin-left: 0;
}
a{
	color: #838383;
}
a:hover{
	color: #333;
}
header nav ul li a{
	font-size: 18px;
	text-transform: uppercase;
}
header nav ul li.current-menu-item a{
	color: #000;
}
header h1{
	position: absolute;
	width: 236px;
	margin:0 auto;
	left:0;
	right:0;
	top:20px;
	z-index: 3;
	background: url(images/logo-bg.png);
}
header h1 a{
	display: block;
	width:236px;
	height:165px;
	text-indent: -9999px;
	background: url(images/logo.png);
}
#shape{
	background: url(images/top-curve.png);
	width:349px;
	height: 73px;
	position: absolute;
	margin:0 auto;
	left:0;
	right:0;
	bottom:-73px;	
	z-index: 2;
}
#shadowLeft{
	background: url(images/shadow-spotlight.png);
	height: 74px;
	position: absolute;
	left:0;
	bottom:-74px;	
	z-index: 2;
}
#shadowRight{
	background: url(images/shadow-spotlight.png);
	height: 74px;
	position: absolute;
	right:0;
	bottom:-74px;	
	z-index: 2;
}
#spotlight{
	background: url(images/spotlight.jpg);
	background-size:cover;
	padding-top: 135px;
	text-align: center;
	color: #fff;
}
#slideshow {
	height: 355px;
	position: relative;
}
#slideshow ul {
	height: 355px;
}
#slideshow .slides li {
	float: left;
	background: none !important;
	width: 100% !important;
}
h1,h2,h3,h4,h5,h6{
	text-transform: uppercase;
}
#spotlight  h2{
	font-size: 40px;	
	margin-bottom: 30px;
}
#spotlight  p{
	text-transform: uppercase;
	font-size: 18px;
	width: 60%;
	margin: 0 auto;
}
a.more{
	background: #2EBFBB;
	padding:3px 10px;
	color: #fff;
	text-transform: uppercase;
}
.slides-nav {
	height: auto !important;
	position: absolute;
	left:0;
	bottom: -1px;
	z-index: 9999;
	width: 100%;
	border-bottom: 1px solid #dbdbdb;
}
#slideshow .slides-nav li {
	width: 33.33%;
	float: left;
	background: url(images/gr.png);
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
}
#slideshow .slides-nav li a {
	display: block;
	width: 100%;
	height: 67px;	
	background: url(images/line.png) repeat-y scroll right top;
	position: relative;
	font-size: 23px;
	text-transform: uppercase;
	line-height: 67px;		
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
}
#slideshow .slides-nav li a span{
	position: absolute;
	width: 33px;
	height:24px;
	background: url(images/sprite.png) -6px -65px;
	top:-24px;
	left:0;
	right:0;
	margin:0 auto;
	display: none;
}
.js #slideshow .slides-nav li a.activeSlide span{
	display: block;
}
.js #slideshow .slides-nav li a.activeSlide {
	background: #2EBFBB;
	color: #fff;
}
#works{
	padding:60px 0 80px;
	text-align: center;
	position: relative;
	z-index: 2;
}
#works h2.title{
	font-size: 40px;
	border-bottom: 1px solid #2EBFBB;
	margin-bottom: 40px;
}
#works h2.title a {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #2EBFBB;
    display: block;
    margin: 0 auto -17px;
    padding: 0 50px;
    width:300px;
}
#works ul li{
	float: left;
	width: 32%;
	margin-right: 2%;
	padding-bottom: 20px;
}
#works ul li.third{
	margin-right: 0;
}
.thumb{
	display: block;
}
#works ul li a.thumb{
	width:100%;
	position: relative;
	overflow: hidden;
}
#works ul li a.thumb img{
	width:100%;
	height:auto;
	display: block;
}
#works ul li .overlay{
	position: absolute;
	width:100%;
	height: 100%;
	left:0;
	background: url(images/tr.png);
	-moz-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	overflow:hidden;
}
#works ul li a.thumb:hover .overlay{
	top:0 !important;
}
#works ul li .overlay small{
	width:48px;
	height:30px;
	background: url(images/sprite.png) no-repeat scroll -169px -13px;
	margin:45px auto 10px;
	display: block;
}
#works ul li .overlay b{
	display: block;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: bold;
	margin:6px 0;
	color: #fff;
}
#works ul li .overlay strong{
	display: block;
	font-size: 18px;
	color: #2EBFBB;
}
#works .view{
	width:90px;
	left:0;
	right:0;
	margin:0 auto;
	bottom:-40px;
	position:absolute;
	color: #2EBFBB;
	font-size: 20px;
}
#works .view span{
	width:13px;
	height:15px;
	display: block;
	margin:0 auto 10px;
	background: url(images/sprite.png) no-repeat scroll -9px -107px;
}
#works .view b{
	display: block;
}
footer{
	background: url(images/footer-curve.png) no-repeat scroll center -3px #2EBFBB;
	color: #fff;
	text-align: center;
	font-size: 16px;
	position: relative;
}
footer a{
	color: #fff;
}
footer a:hover{
	color: #f9f9f9;
}
footer section.widget{
	float: left;
	width:27.33%;
	background: url(images/footer-line-ver.png) repeat-y scroll right top;
	padding:105px 3% 20px;
}
footer section.widget.last{
	background: none;
}
footer section.widget h3{
	font-size: 25px;
	margin-bottom: 40px;
	font-weight: bold;
}
footer section.widget.contact h3{
	margin-bottom: 50px;
}
footer .widget span.number{
	background: #007A71;
	padding:10px 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
footer .widget.contact p{
	margin-top: 60px;
}
footer .widget .social a{
	display: inline-block;
	width:43px;
	height:43px;
	background: url(images/sprite.png) no-repeat scroll -7px -7px;
	text-indent: -9999px;
	margin-left: 10px;
}
footer .widget .social a#fb{
	margin-left: 0;
}
footer .widget .social a#twt{
	background-position: -62px -7px;
}
footer .widget .social a#gplus{
	background-position: -117px -7px;
}
footer .widget .partner{
	border-top: 1px solid #43cfca;
	padding-top: 20px;
	margin-top: 85px;
}
footer .widget .partner  h4{
	margin-bottom: 15px;
}
footer .widget .partner span{
	background: url(images/sprite.png) no-repeat scroll -3px -217px;
	text-indent: -9999px;
	width:128px;
	height:62px;
	display: block;
	margin:0 auto;	
}
#testimonials{
	min-height: 325px;
}
#testimonials  .start,#testimonials  .end{
	text-indent: -9999px;
	width:26px;
	height:23px;
	position: absolute;
}

#testimonials  .start{
	background: url(images/sprite.png) no-repeat scroll -53px -65px;	
	left:0;
	top:0;
}
#testimonials div.quote{
	position: relative;
	padding:25px 0;
}
#testimonials  .end{
	background: url(images/sprite.png) no-repeat scroll -97px -65px;
	right:0;
	bottom:0;
}
#testimonials div.quote p{
	padding: 0 3%;
	font-size: 14px;
}
#testimonials .client{
	text-align: left;
	margin-top: 20px;
}
#testimonials .client h5{
	font-weight: bold;
	padding-top: 12px;
}
#testimonials .client p{
	font-size: 13px;
}
#testimonials .client .thumb{
	background: url(images/sprite.png) no-repeat scroll -2px -135px;
	float: left;
	margin-right: 10px;
	width:80px;
	height:73px;
}
#testimonials .client .thumb img{
	margin: 5px 0 0 4px;
}
#secFoot{
	background:url(images/footer-line-hori.png) repeat-x scroll left top #007A71;
	text-align: left;
	padding:20px 0;
	font-size: 15px;
	color: #a0dffb;
}
#secFoot a{
	color: #a0dffb;
}
#secFoot a:hover{
	color: #fff;
}
#secFoot ul{
	width:60%;
	float: left;
}
#secFoot ul li{
	float: left;
	margin-right: 3%;
}

.submit:hover,.button:hover,.thumb:hover,.view:hover,#slideshow .slides-nav li a:hover,footer .widget .social a:hover{
	filter: alpha(opacity = 85);
	-moz-opacity: 0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
}
/*inner page style start here*/
/*about page style start here*/
.inner #spotlight {
	padding-top: 120px;
}
.inner #spotlight h2{
	font-size: 35px;
}
.inner #spotlight p{
	font-size: 16px;
}
#bottom_area{
	background: url("images/gr.png") repeat scroll 0 0 transparent;
    font-size: 23px;
    height: 67px;
    line-height: 67px;
    position: relative;
    text-transform: uppercase;
    width: 100%;
    border-bottom: 1px solid #DBDBDB;
    margin-top: 50px;
}
.inner #spotlight #bottom_area p{
	text-align: center;
	color: #666;
	line-height: 67px;
	font-size: 20px;
	width:100%;
}
.inner #content{
	padding:40px 0 60px;
}
#contentLeft{
	width:47%;
	float: left;
	padding:50px 3% 50px 0;
}
#contentRight{
	width:47%;
	float: right;
	padding:50px 0 50px 3%;
	position: relative;
}
.single p{
	margin-bottom: 20px;
}
#team {
	text-align: center;
}
#team img{
	width:auto;
	height:auto;
	max-width:100%;	
}
#left_line{
	width:16px;
	position: absolute;
	left: -8px;
	top:0;
}
#top_part{
	width:16px;
	height: 51px;
	background: url(images/line-top.png);
	display: block;
}
#middle_part{
	width:16px;
	background: url(images/line-centre-area.png) repeat-y;
	display: block;
}
#bottom_part {
    background: url("images/line-under.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 65px;
    margin-left: -8px;
    width: 16px;
}
#footer_logo {
    background: url("images/sprite.png") no-repeat scroll -136px -60px rgba(0, 0, 0, 0);
    height: 35px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 5px;
    width: 38px;
}
/*about page style end here*/
/*clients page style start here*/
#clients li{
	float: left;
	width: 32%;
	margin-right: 2%;
	margin-bottom: 35px;
	text-align: center;
	height:110px;
}
#clients li img{
	max-width:100%;
	width: auto;
	height: auto;
}
#clients li.third{
	margin-right: 0;
}
.inner .clients h3{
	margin-bottom: 30px;
}
#client_testimonial li{
	margin-bottom: 40px;
}
#client_testimonial li:last-child{
	margin-bottom: 0;
}
#client_testimonial .thumb {
    background: url("images/sprite.png") no-repeat scroll -91px -133px transparent;
    float: left;
    height: 76px;
    margin-right: 10px;
    width: 82px;
}
#client_testimonial .thumb img {
    height: 68px;
    margin: 5px 0 0 5px;
    width: 67px;
}
#client_testimonial div.quote{
	float: left;
	position: relative;
	padding:25px 0;
	margin-top: 25px;
}
#client_testimonial .start {
    background: url("images/sprite.png") no-repeat scroll -229px -65px transparent;
    left: 0;
    top: 0;
}
#client_testimonial .start, #client_testimonial .end {
    height: 23px;
    position: absolute;
    text-indent: -9999px;
    width: 26px;
}
#client_testimonial .end {
    background: url("images/sprite.png") no-repeat scroll -273px -65px transparent;
    bottom: 0;
    right: 0;
}
#client_testimonial div.client{
	margin-left: 90px;
	font-size: 14px;
	background: url(images/under_line.png) repeat-x scroll left bottom;
	padding-bottom: 20px;
}
#client_testimonial div.client h5{
	color: #333;
	font-weight: bold;
	font-size: 16px;
}
/*clients page style end here*/
/*services page style start here*/
.services li{
	padding:3%;	
	margin-bottom: 25px;
}
#contentLeft .services li:nth-child(odd){
	background: #f8f8f8;
}
#contentRight .services li:nth-child(even){
	background: #f8f8f8;
}
.services li a.icon{
	width:91px;
	height:91px;
	float: left;
	margin-right: 20px;
	background: url(images/sprite.png) no-repeat scroll -3px -293px;
}
.services li a.icon small{
	width:55px;
	height:55px;
	display: block;
	margin:20px auto 0;
	background: url(images/sprite.png) no-repeat scroll 0px -392px;
}
.services li a.print_design small{
	background-position: 0 -392px;
}
.services li a.web_design small{
	background-position: -55px -392px;
}
.services li a.web_development small{
	background-position: -110px -392px;
}
.services li a.seo small{
	background-position: -165px -392px;
}
.services li a.ecommerce small{
	background-position: -220px -392px;
}
.services li a.content_writing small{
	background-position: -275px -392px;
}
.services li a.translation small{
	background-position: -330px -392px;
}
.services li a.software_development small{
	background-position: 0 -447px;
}
.services li a.mobile_application small{
	background-position: -55px -447px;
}
.services li a.live_streaming small{
	background-position: -110px -447px;
}
.services li a.digital_marketing small{
	background-position: -165px -447px;
}
.services li a.branding small{
	background-position: -220px -447px;
}
.services li h2{
	margin:5px 0 15px;
}
.services li h2 a{
	color: #555555;
}
.services li h2 a:hover{
	color: #333;
}
.single  .service_title{
	text-align: center;
}
.single .services li{
	margin:0;
	padding:0;
}
.single .services li a.icon{
	float: none;
	display: block;
	height:71px;
	padding-top: 20px;
	margin:20px auto;
}
.single .services li a.icon small{
	margin-top: 0;
}
.single.service div.content{
	width:60%;
	margin:0 auto;
	text-align: center;
}
/*services page style end here*/
/*contact page style start here*/
#content.contact p{
	position: relative;
	margin-bottom: 30px;
}
#content.contact label{
	display: block;
	margin-bottom: 8px;
}
#content.contact input,#content.contact textarea{
	display: block;
	border: 1px solid #E7E7E7;
	padding:2%;
	width:96%;
}
#content.contact input.submit{
	width:200px;
	padding:8px 0;
	background: #2EBFBB;
	color: #fff;
	text-transform: uppercase;
	font-size: 15px;
	cursor: pointer;
}
#content.contact textarea{
	resize: none;
}
#map{
	border: 10px solid #f8f8f8;
	margin-bottom: 30px;
}
#map_canvas{
	height:400px;
	width:100%;
}
#location,#phone,#email{
	float: left;
	margin-right: 15px;
	width:43px;
	height:43px;
	background: url(images/sprite.png) -226px -6px;
	margin-top: 7px;
}
#phone{
	background-position: -281px -6px;
}
#email{
	background-position: -336px -6px;
}
/*contact page style end here*/
/*works page style start here*/
#bottom_area.works a {
    background: url("images/line.png") repeat-y scroll right top transparent;
    display: block;
    font-size: 23px;
    height: 67px;
    line-height: 67px;
    position: relative;
    text-transform: uppercase;
    width: 25%;
    float: left;
    position: relative;
}
#bottom_area.works a.last{
	background: none;
	float: right;
}
#bottom_area.works a.active{
	background: #2EBFBB;
	color: #fff;
}
#bottom_area.works a span{
	display: none;
	width:33px;
	height:24px;
	background: url(images/sprite.png) -182px -65px;
	position: absolute;
	left:0;
	right:0;
	bottom:-23px;
	margin:0 auto;
}
#bottom_area.works a.active span{
	display: block;
}
.inner #works{
	padding:20px 0; 0
}
#works_application li{
	margin-top: 30px;
}
#works_application li a.thumb{
	float: left;
	width:30%;
	margin-right: 3%;
}
#works_application li a.thumb img{
	width:100%;
	height:auto;
}
#works_application li  h2{
	font-size: 25px;
}
#works_application li  p{
	margin: 10px 0;
}
#works_application li  .view{
	width:200px;
	background: #2EBFBB;
	padding:8px 0;
	color: #fff;
	text-align: center;
	float:left;
	font-size: 15px;
	text-transform: uppercase;
}
.branding ul li,.print ul li{
	background:none !important;
}
.print ul li{
	margin-bottom: 25px;
}
/*works page style start here*/
/*inner page style end here*/
@media all  and (max-width: 1100px) {
	header nav.right ul li{
		margin-left: 12%;
	}
	header nav.left ul li{
		margin-right: 12%;
	}
	header nav ul li a{
		font-size: 16px;
	}
	footer section.widget{
		padding-bottom:50px;
	}
}
@media all  and (max-width: 1000px) {	
	footer section.widget h3{
		font-size: 20px;
	}
	#contentLeft{
		width:100%;
		float: none;
		padding:0;
		margin-bottom: 30px;
	}
	#contentRight{
		width:100%;		
		float: none;
		padding:0;
	}
	#left_line{
		display: none;
	}
	.inner #spotlight #bottom_area p{
		font-size: 15px;
	}
}
@media all  and (max-width: 900px) {
	header nav ul li{
		margin-bottom: 10px;		
	}
	header nav ul li a{
		font-size: 13px;
	}
	footer section.widget.testimonials{
		display: none;
	}
	footer section.widget{
		width:44%;
		margin-top: 60px;
		padding-top: 40px;
	}	
	#secFoot ul{
		display: none;
	}
	#secFoot p.right{
		width:100%;
		text-align: center;
	}
}
@media all  and (max-width: 800px) {
	header nav ul li a{
		font-size: 12px;
	}
}
@media all  and (max-width: 700px) {
	header nav ul li{
		margin-bottom: 10px;
		float: none;
		clear: both;		
	}	
	header nav ul li a{
		font-size: 14px;
	}
	header nav{
		margin-top: 28px;
	}
	#slideshow .slides-nav li a{
		font-size: 15px;
	}
	#slideshow .slides li p{
		font-size: 16px;
	}
	#slideshow .slides li h2{
		font-size: 30px;
	}
	#works ul li{
		width:49%;
	}
	#works ul li.third{
		margin-right: 2%;
	}
	#works ul li.fourth{
		margin-right: 2%;
	}
	#works ul li.second{
		margin-right: 0%;
	}	
	#clients li{
		width:49%;
	}
	#clients li.third{
		margin-right: 2%;
	}
	#clients li.second{
		margin-right: 0;
	}
	.inner #spotlight #bottom_area p{
		font-size: 12px;
	}	
	#bottom_area.works a{
		font-size: 15px;
	}
	#works_application li a.thumb{
		width:60%;
	}
	.single.service div.content{
		width:100%;		
	}
}
@media all  and (max-width: 500px){	
	#slideshow{
		display: none;
	}
	#for_small_screen{
		display: block;
	}
	.home #spotlight{
		padding-top: 80px;
		height:200px;
	}
	#bottom_area{
		display: none;
	}
	.inner #spotlight{
		padding-bottom: 20px;
	}
	#spotlight #for_small_screen li h2{
		font-size: 22px;
	}
	#spotlight #for_small_screen li p{
		font-size: 14px;
	}
	#works h2.title a{
		width:200px;
		font-size: 25px;
	}
	#works h2.title a{
		padding:0 10px;
	}
	footer section.widget.contact{
		display: none;
	}
	footer section.widget{
		width:94%;
		background: none;
	}
	footer .widget .partner{
		margin-top: 40px;
	}
	#works ul li{
		background: none;
		padding-bottom: 0;
		margin-bottom: 2%;
	}	
	#map_canvas{
		height: 200px;
	}
}
@media all  and (max-width: 400px){
	#shadowLeft{
		display: none;
	}
	#shadowRight{
		display: none;
	}
	#shape{
		display: none;
	}
	header{
		height:auto;
	}
	header h1{
		position: relative;
	}
	header h1 a{
		background-color: #fff;
	}
	header nav{
		display: none;
	}
	#spotlight{
		display: none;
	}
	#works ul li{
		width:100%;
		margin-right: 0;
	}
	#clients li{
		width:100%;
		margin-right: 0;
	}
	#small_screen_menu{
		display: block;
		margin-top: 40px;
	}
	#small_screen_menu ul li:first-child{
		border-top: 1px solid #e7e7e7;
	}
	#small_screen_menu ul li{
		float: none;
		margin:0;
		padding:15px 0;
		border-bottom: 1px solid #e7e7e7;
		text-align: center;
		background: #f5f5f5;
	}
	#works{
		padding-bottom: 40px;
	}
	#works_application li a.thumb{
		width:100%;
		margin-bottom: 30px;
	}
}
@media all  and (max-width: 250px){
	#works h2.title a{
		font-size: 15px;
		width: 150px;
	}
	#content.contact input.submit{
		width:100%;
	}
	#works_application li  .view{
		width:100%;
	}
}