/* --------------------------------------------------------- */
/* SMARTPHONES, TABLETS & TINY DESKTOPS -------------------- */
/* --------------------------------------------------------- */
 
/* Old Smartphones (portrait and landscape) ---------------- */
@media
only screen and  (max-width: 319px) {
#wrapper {
	width:240px;
	margin:0 auto;
}
#header {
	width:240px;
}
.pageBody, .pageBodyTop {
	width:216px !important;
}
#header .pageBodyWrap,
.section-container .pageBodyWrap,
#contactus .pageBodyWrap, header,
.welcomeBlk, .pageTitle, .banner {
	width:196px !important;
}
header, #header {
	overflow:hidden;
	z-index:9999;
}
.section-container .pageBodyWrap,
#contactus .pageBodyWrap {
	margin-top:55px;
}
.topContInfo {
	padding:0 0 0 40px;
}
p.contIcon,
p.mailIcon {
	background:url(../images/icoCont.png) 0 0 no-repeat;
	padding:0 0 0 26px;
	line-height:15px;
	float:left;
}
p.mailIcon {
	background:url(../images/icoMail.png) 0 3px no-repeat;
}
header .logo {
	margin:13px 0 0 60px;
}
.selectnav {
	display: block;
	margin:30px 0 0;
	width:196px;
}
.shommenu #menu {
	display:none;
}
.banner {
	height:10px;
}
.banner iframe {
	display:none;
	height:1px;
}
#services {
	width:196px !important;
	margin:0 0 15px 0;
	padding:0 0 15px;
}
#services .blk {
	width:100%;
}
#services .blk {
	margin-bottom:4px;
}
.callAction {
	padding:20px 0 0;
}
.getTouch {
	width:99% !important;
	margin:0 0 2% 1% !important;
	height:auto;
}
.getQuote,
.getInTouch {
	background:url(../images/getquote.gif) no-repeat;
	background-size:120% 200%;
	background-position:-7px 0;
	width:30%;
	height:50px;
	margin:-1px 0 0 0;
	border:none;
	outline:none;
	cursor:pointer;
	float:left;
}
.getInTouch {
	background:url(../images/gettouch.gif) no-repeat;
	background-position:-7px 0;
	background-size:120% 200%;
}
.getQuote:hover,
.getInTouch:hover {
	background-position:-7px -50px;
}
.getInTouch {
	margin:0 0 2% 0 !important;
}
.getQuoteTxt {
	width:63%;
	padding:5px 5px 0;
	font-size:15px;
	float:left;
}
.getInTouch .getQuoteTxt {
	width:50% !important;
	padding:5px 5px 0 !important;
	float:left;
}
/**************/
.mediaBlk {
	margin:0;
	width:93%;
	height:auto !important;
	float:left;
}
.mediaBlkTop {
	width:100%;
}
.mediaRow {
	height:auto;
}
.mediaBlkImg {
	width:72%;
	height:auto;
	padding:10px 0 0;
}
.mediaBlkImg img {
	width:100%;
}
.mediaBlkLft {
	height:auto;
	width:15%;;
	padding: 3px 7px;
}
.mediaBlkLft a {
margin:0 0 2px;
padding:0;
}
.mediaRow {
	width:100%;
}
.mediaPplName {
	width:62%;
	padding:9px 2px 9px 9px;
	height:auto;
	float:right;
}
.specImg {
	width:60px !important;
}
.aboutSpec {
	width:100%;
	margin-top:20px;
}
.aboutSpec li .speDet {
	width:66%;
	padding:0 0 15px;
}
.aboutSpec li {
	height:auto;
}

/**************/

.aboutSpec li,
.skillBlk,
.skillLevel {
	width:100%;
}
.skillLevel {
	padding:20px 0;
}
.levels li,
.levels li.second {
	width:98%;
}
.skillBlk {
	margin:0;
}
.skillIcon {
	width:30%;
}
.skillDet {
	width:55%;
}
.skillMidLft .skillDet {
	width:40%;
	padding: 0 0 0 25px;
}
.skillMidLft .skillIcon {
	width:30%;
}
.testWrap {
	width:72%;
	padding:55px 0 0 18%;
	background:url(../images/icoOpen.gif) 0% 60% no-repeat;
}

.testWrapCont {
	margin:0 7% 25px 0;
}
.testContBtm {
	padding-bottom:10px;
}
.testContBtm h2 {
	line-height:11px;
	margin:0;
	padding:10px 0 5px;
}
.testContBtm p {
	line-height:11px;
	margin:0;
}

.gallerynav {
	margin:0 auto 10px 0 !important;
	width:100%;
}
.gallerynav li {
	margin:0 0 5px;
	width:auto;
}
.gallerynav li a {
	padding:2px 12px 2px;
	margin:1px;
}
.tabContent img {
	max-width:100%;
    height: auto;
}
.recentProj {
	padding:0 0 20px;
}
#carousel3, #carWidth {
	display:none;
	height:20px;
}
.jcarousel-container {
	width:  124px !important;
	height: 127px;
	margin:0 0 0 32px;
}
.jcarousel-item {
	width: 117px;
	height: 117px;
	margin:0 3px;
}
.jcarousel-item img {
	width:100%;
	height:100%;
}

#myworks .recentProj {
	display:none !important;
	height:0px;

}
.jcarousel-next-vertical, .jcarousel-prev-vertical {
	position: absolute;
	width: 20px;
	height: 20px;
	background:url(../images/footer-arrow-next.gif);
	background-size:20px auto !important;
	margin:45px 0 0 132px;
}
.jcarousel-prev-vertical {
	margin-left:-25px;
	background:url(../images/footer-arrow-prev.gif);
}
.jcarousel-next-vertical:hover,
.jcarousel-prev-vertical:hover {
	background-position: 0 -20px;
}


.contactForm {
	width:100%;
	margin:0;
}
.contactFormRow {
	margin-left:3px;
}
.formTxtBox {
	width:90%;
	margin:0 0 8px;
}
.yourEmail {
	margin:0 0 5px;
}
.formMsgBox {
	width:90%;
	margin:0;
}
.contactDet {
	margin-top:15px;
}
.contactDet ul {
	padding:2% 0 0;
	width:100%;
	float:left;
}
.contactDet ul li {
	width:88%;
	padding:0.5% 0 3% 12%;
	float:left;
}
.contactFormRow {
	width:98%;
	padding:0 0 2% 1%;
}
.contactDet {
	width:96%;
	padding:0 0 2% 2%;
}


#googlemap {
	width:196px;
	height:300px;
}

footer .wrapper {
	width:196px;
	text-align:center;
	line-height:15px;
	padding:20px 0 0;
}
.grid {
	padding-top:20px;
	padding-left:2px;
}
.grid li, .grid li img { 
	width:191px !important;
	height:191px;
}
.caption {
	width:100%;
}
.caption .top {
	margin:55% 0 0%;
}
.caption .top .show {
	display:none;
}
.caption .top .link {
	margin-left:68px;
}
.btm {
	clear:both;
	width:50%;
	text-align:center;
	margin:0;
	padding:5px 0 0;
	color:#fff;
}
div.cap {
	background-color:#3980af;
	position:relative;
	text-align:center;
	min-height:167px;
	width:167px;
	color:#d20000;
	text-shadow:0 1px 1px #999;
	text-transform:capitalize;
	line-height:16px;
	}
.cap .top {
	padding:30px 0 0 ;
	width:167px;
}
.cap .top a {
	float:left;
	display:block;
	width:33px;
	height:33px;
}
.cap .top a:hover {
	background-position:0 -33px !important;
}
.cap .top a.show {
	background:url(../images/icoEnlarge.gif) no-repeat;
	margin:0 5px 0 28px;
	display:none;
}
.cap .top a.link {
	background:url(../images/icoLink.gif) no-repeat;
	margin:0 5px 0 43px;
}
.cap .btm {
	width:70% !important;
	text-align:center;
	font-family: 'CandaraBold';
	font-size:11px;
	color:#fff;
	padding:5px 0 0;
}
footer .scrollTop {
	display:none;
}
}
/* Smartphones (portrait) & Old SP (landscape) ------------- */
@media
only screen and (min-width: 320px) and (max-width: 479px) {
#wrapper {
	width:320px;
	margin:0 auto;
}


#header {
	width:320px;
}
.pageBody, .pageBodyTop {
	width:296px !important;
}
#header .pageBodyWrap,
.section-container .pageBodyWrap,
#contactus .pageBodyWrap, header,
.welcomeBlk, .pageTitle, .banner {
	width:276px !important;
}
header, #header {
	overflow:hidden;
	z-index:9999;
}
.section-container .pageBodyWrap,
#contactus .pageBodyWrap {
	margin-top:55px;
}
.topContInfo {
	padding:0 0 0 0px;
}
.topContInfo p {
	float:left !important;
}
p.contIcon,
p.mailIcon {
	background:url(../images/icoCont.png) 0 4px no-repeat;
	padding:0 0 5px 20px;
}
p.mailIcon {
	background:url(../images/icoMail.png) 0 6px no-repeat;
}
header .logo {
	margin:13px 0 0 100px;
}
.selectnav {
	display: block;
	margin:30px 0 0;
	width:276px;
}
.shommenu #menu {
	display:none;
}

#services {
	width:456px !important;
}
.banner {
	height:10px;
}
.banner iframe {
	display:none;
	height:1px;
}

#services {
	margin:0 0 15px 0;
	padding:0 0 15px;
}
#services .blk {
	width:60%;
}
#services .blk {
	margin-bottom:4px;
}
.callAction {
	padding:20px 0 0;
}
.getTouch {
	width:99% !important;
	margin:0 0 2% 1% !important;
	height:auto;
}
.getQuote,
.getInTouch {
	background:url(../images/getquote.gif) no-repeat;
	background-size:120% 200%;
	background-position:-9px 0;
	width:30%;
	height:50px;
	margin:-1px 0 0 0;
	border:none;
	outline:none;
	cursor:pointer;
	float:left;
}
.getInTouch {
	background:url(../images/gettouch.gif) no-repeat;
	background-position:-9px 0;
	background-size:120% 200%;
}
.getQuote:hover,
.getInTouch:hover {
	background-position:-9px -50px;
}
.getInTouch {
	margin:0 0 2% 0 !important;
}
.getQuoteTxt {
	width:63%;
	padding:5px 5px 0;
	font-size:21px;
	float:left;
}
.getInTouch .getQuoteTxt {
	width:50% !important;
	padding:5px 5px 0 !important;
	float:left;
}
/**************/
.mediaBlk {
	margin:0;
	width:93%;
	height:auto;
}
.mediaBlkTop {
	width:100%;
}
.mediaBlkImg {
	width:74.2%;
	height:auto;
}
.mediaBlkImg img {
	width:100%;
}
.mediaBlkLft {
	padding-top:8px;
	height:auto;
}
.mediaRow {
	width:100%;
}
.mediaPplName {
	width:73%;
	padding:9px 2px 0 9px;
}
	
.aboutSpec {
	width:100%;
	margin-top:20px;
}
.aboutSpec li .speDet {
	width:71%;
}

/**************/

.aboutSpec li,
.skillBlk,
.skillLevel {
	width:100%;
}
.skillLevel {
	padding:20px 0;
}
.levels li,
.levels li.second {
	width:98%;
}
.skillBlk {
	margin:0;
}
.skillIcon {
	width:20%;
}
.skillDet {
	width:70%;
}
.skillMidLft .skillDet {
	width:57%;
	padding: 0 0 0 25px;
}
.skillMidLft .skillIcon {
	width:20%;
}
.testWrap {
	width:72%;
	padding:55px 0 0 18%;
	background:url(../images/icoOpen.gif) 0% 60% no-repeat;
}
.testWrapCont {
	margin:0 7% 25px 0;
}
.testContBtm h2 {
	line-height:11px;
	margin:0;
	padding:0 0 5px;
}
.testContBtm p {
	line-height:11px;
	margin:0;
}
.grid li {
	width: 100%;
}
.gallerynav {
	margin:0 auto 10px 0 !important;
	width:100%;
}
.gallerynav li {
	margin:0 0 5px;
	width:auto;
}
.gallerynav li a {
	padding:2px 25px 2px;
	margin:1px;
}
.grid {
	padding-top:20px;
	padding-left:2px;
}
.grid li, .grid li img { 
	width:271px;
}
.caption {
	width:100%;
}
.caption .top {
	margin:35% 0 0 16%;
}
.caption .top .show {
	display:none;
}
.caption .top .link {
	margin-left:68px;
}
.tabContent img {
	max-width:100%;
    height: auto;

}
#carousel3, #carWidth {
	display:none;
	height:20px;
}
.jcarousel-container {
	width:  174px !important;
	height: 167px;
	margin:0 0 0 38px;
}
.jcarousel-item {
	width: 167px;
	height: 167px;
	margin:0 10px;
}
.jcarousel-next-vertical, .jcarousel-prev-vertical {
	position: absolute;
	width: 20px;
	height: 20px;
	background:url(../images/footer-arrow-next.gif);
	background-size:20px auto !important;
	margin:75px 0 0 194px;
}
.jcarousel-prev-vertical {
	margin-left:-25px;
	background:url(../images/footer-arrow-prev.gif);

}
.jcarousel-next-vertical:hover,
.jcarousel-prev-vertical:hover {
	background-position: 0 -20px;
}
.contactForm {
	width:100%;
	margin:0;
}
.contactFormRow {
	margin-left:3px;
}
.formTxtBox {
	width:90%;
	margin:0 0 8px;
}
.yourEmail {
	margin:0 0 5px;
}
.formMsgBox {
	width:90%;
	margin:0;
}
.contactDet {
	margin-top:15px;
}
.contactDet ul {
	padding:2% 0 0;
	width:100%;
	float:left;
}
.contactDet ul li {
	width:90%;
	padding:0.5% 0 3% 10%;
	float:left;
}
.contactFormRow {
	width:98%;
	padding:0 0 2% 1%;
}
.contactDet {
	width:96%;
	padding:0 0 2% 2%;
}
#googlemap {
	width:276px;
	height:300px;
}
footer .wrapper {
	width:276px;
	text-align:center;
}

footer .scrollTop {
	display:none;
}
}
/* Smartphones (landscape) & Old Tablets (Portrait) -------- */
@media
only screen and (min-width: 480px) and (max-width: 767px) {
#wrapper {
	width:480px;
	margin:0 auto;
}
#header {
	width:480px;
}
.pageBody, .pageBodyTop {
	width:456px !important;
}
#header .pageBodyWrap,
.section-container .pageBodyWrap,
#contactus .pageBodyWrap, header,
.welcomeBlk, .pageTitle, .banner {
	width:436px !important;
}
.section-container .pageBodyWrap,
#contactus .pageBodyWrap {
	margin-top:55px;
}
.topContInfo {
	padding:0 0 0 85px;
}
p.contIcon,
p.mailIcon {
	background:url(../images/icoCont.png) 0 4px no-repeat;
	padding:0 0 5px 26px;
}
p.mailIcon {
	background:url(../images/icoMail.png) 0 6px no-repeat;
}
header .logo {
	margin:13px 0 0 160px;
}
header nav {
	width:100%;
	margin:10px 0 0;
}
#menu li {
	width:19.3%;
}
nav ul#menu li a#home {
	width:100%;
	background:url(../images/nav.png) -10px 0 no-repeat;
}
nav ul#menu li a#home:hover, ul#menu li.current a#home {
	background:url(../images/nav.png) -10px -58px no-repeat;
}
nav ul#menu li a#about {
	background:url(../images/nav.png) -114px 0 no-repeat;
	text-align:left;
	padding-left:15px;
}
nav ul#menu li a#about:hover, ul#menu li.current a#about {
	background:url(../images/nav.png) -114px -116px no-repeat;
}
nav ul#menu li a#skills {
	background:url(../images/nav.png) -217px 0 no-repeat;
	text-align:left;
	padding-left:15px;
}
nav ul li a#skills:hover, ul#menu li.current a#skills {
	background:url(../images/nav.png) -217px -174px no-repeat !important;
}
nav ul li a#works {
	background:url(../images/nav.png) -322px 0 no-repeat;
	text-align:left;
	padding-left:15px;
}
nav ul#menu li a#works:hover, ul#menu li.current a#works {
	background:url(../images/nav.png) -322px -232px no-repeat;
}
nav ul#menu li a#contact {
	background:url(../images/nav.png) -420px 0 no-repeat;
	text-align:left;
	padding-left:15px;
}
nav ul#menu li a#contact:hover, ul#menu li.current a#contact {
	background:url(../images/nav.png) -420px -290px no-repeat;
	width:109px;
}
#services {
	width:456px !important;
}
#services {
	width:456px;
	margin:0 -10px 15px 0;
	padding:0 0 15px;
}
#services .blk {
	width:95%;
}
#services .blk {
	margin-bottom:4px;
}
.callAction {
	padding:20px 0 0;
}
.getTouch {
	width:99% !important;
	margin:0 0 2% 1% !important;
	height:52px;
}
.getInTouch {
	margin:0 0 2% 0 !important;
}
.getQuoteTxt {
	width:63%;
	padding:5px 5px 0;
	float:left;
}
.getInTouch .getQuoteTxt {
	width:50% !important;
	padding:5px 5px 0 !important;
	float:left;
}
/**************/
.mediaBlk {
	margin:0 0 0 60px;
}
.aboutSpec {
	width:100%;
	margin-top:30px;
}
.aboutSpec li .speDet {
	width:81%;
}
/**************/

.aboutSpec li,
.skillBlk,
.skillLevel {
	width:100%;
}
.skillLevel {
	padding:20px 0;
}
.levels li,
.levels li.second {
	width:98%;
}
.skillBlk {
	margin:0;
}
.skillIcon {
	width:15%;
}
.skillDet {
	width:79%;
}
.skillMidLft .skillDet {
	width:72%;
	padding: 0 0 0 25px;
}
.skillMidLft .skillIcon {
	width:10%;
}
.testWrap {
	width:78%;
	padding:32px 0 0 12%;
}
.testContBtm h2 {
	line-height:11px;
	margin:0;
	padding:0 0 5px;
}
.testContBtm p {
	line-height:11px;
	margin:0;
}
.grid li {
	width: 100%;
}
.gallerynav {
	margin:0 auto 10px 0 !important;
	z-index:999;
	width:100%;
}
.gallerynav li {
	margin:0 0 5px;
	width:auto;
}
.gallerynav li a {
	padding:2px 20px 2px;
	margin:2px;
}
.grid {
	padding-top:20px;
	padding-left:1px;
}
.grid li, .grid li img { 
	width:432px;
}

.caption .top {
	margin:22% 0 0 25%;
}
.tabContent img {
	max-width:100%;
    height: auto;
}
.jcarousel-container {
	width:  338px !important;
	height: 167px;
	margin:0 0 0 45px;
}
.jcarousel-item {
	width: 167px;
	height: 167px;
}
#carousel3, #carWidth {
	display:none;
	height:1px;
}
.banner {
	height:10px;
}
.banner iframe {
	display:none;
	height:1px;
}
.jcarousel-next-vertical, .jcarousel-prev-vertical {
	position: absolute;
	width: 20px;
	height: 20px;
	background:url(../images/footer-arrow-next.gif);
	background-size:20px auto !important;
	margin:75px 0 0 350px;
}
.jcarousel-prev-vertical {
	margin-left:-30px;
	background:url(../images/footer-arrow-prev.gif);

}
.jcarousel-next-vertical:hover,
.jcarousel-prev-vertical:hover {
	background-position: 0 -20px;
}
.contactForm {
	width:100%;
	margin:0;
}
.contactFormRow {
	margin-left:3px;
}
.formTxtBox {
	width:44%;
	margin:0;
}
.formMsgBox {
	width:94%;
	margin:0;
}
.contactDet ul {
	padding:2% 0 0;
	width:100%;
	float:left;
}
.contactDet ul li {
	width:42%;
	padding:0.5% 0 1% 7%;
	float:left;
}
.contactFormRow {
	width:98%;
	padding:0 0 2% 1%;
}
.contactDet {
	width:96%;
	padding:0 0 2% 2%;
}
#googlemap {
	width:436px;
	height:300px;
}

footer .wrapper {
	width:436px;
}
}
 
/* Smartphones & Tablets (landscape) & Splitted Desktops --- */
@media
only screen and (min-width: 768px) and (max-width: 1000px) {
    #wrapper {
	width:768px;
	margin:0 auto;
}
#header {
	width:768px;
}
.pageBody, .pageBodyTop,
.section-container .pageBody {
	width:744px;
}
header, #header .pageBodyWrap,
.banner, .banner img,
.section-container .pageBodyWrap,
.welcomeBlk, .pageTitle,
#services {
	width:724px !important;
}
.banner {
	height:0px;
}
.banner iframe {
	display:none;
	height:1px;
}
#lftShd, #rgtShd { 
	position:absolute; 
	z-index:9999; 
	margin:0;
	width:100px !important;
}
#lftShd img, #rgtShd img{
	width:100px !important;
	height:178px;
}
#rgtShd { 
	margin:0 0 0 575px
}
#services {
	width:724px;
	margin:0 -10px 15px 0;
	padding:0 0 15px;
}
#services .blk {
	width:358px;
}
#services .blk {
	margin-bottom:4px;
}
.callAction {
	padding:20px 0 0;
}
.getQuoteTxt {
	width:56%;
	padding:5px 5px 0;
}
.aboutSpec {
	width:55%;
}
.aboutSpec li,
.skillBlk,
.skillLevel {
	width:100%;
}
.skillLevel {
	padding:20px 0;
}
.levels li,
.levels li.second {
	width:98.5%;
}
.skillBlk {
	margin:0;
}
.skillIcon {
	width:10%;
}
.skillDet {
	width:85%;
}
.skillMidLft .skillDet {
	width:83%;
	padding: 0 0 0 25px;
}
.skillMidLft .skillIcon {
	width:10%;
}
.gallerynav {
	display:block;
}
.grid li {
	width: 238px;
}
.grid li img {
	width:238px;
}
.gallerynav {
	margin:0 auto 40px 125px !important;
}
.tabContent img {
	max-width:100%;
    height: auto;
}
/***********/
.jcarousel-container {
	width:  674px;
	height: 167px;
	margin:0 0 0 23px;
}
.jcarousel-item {
	width: 167px;
	height: 167px;
}
#carousel3 .jcarousel-item {
	width: 222px !important;
	height: 200px !important;
	margin:0 2px 0 1px;
}
#carousel3 .jcarousel-item img {
	width:100% !important;
}
.jcarousel-next-vertical, .jcarousel-prev-vertical {
	position: absolute;
	width: 20px;
	height: 20px;
	background:url(../images/footer-arrow-next.gif);
	background-size:20px auto !important;
	margin:70px 0 0 684px;
}
.jcarousel-prev-vertical {
	margin-left:-25px;
	background:url(../images/footer-arrow-prev.gif);

}
.jcarousel-next-vertical:hover,
.jcarousel-prev-vertical:hover {
	background-position: 0 -20px;
}
/*********************/
.contactForm {
	width:100%;
	margin:0;
}
#contactus .pageBodyWrap {
	width:724px;
}
.contactDet ul {
	padding:2% 0 0;
	width:100%;
	float:left;
}
.contactDet ul li {
	width:45%;
	padding:0.5% 0 1% 4%;
	float:left;
}
.contactFormRow {
	width:98%;
	padding:0 0 2% 1%;
}
.contactDet {
	width:96%;
	padding:0 0 2% 2%;
}
#googlemap {
	width:724px;
	height:300px;
}
footer .wrapper {
	width:724px;
}
}