@import url('../css/reset.css');
@import url('../css/style.css');





body {background: #303030;}

#quote-form {width: 100%;}
#quote-form .info {padding: 0 0 0 20px;}

#loadInfo {display: none;}


/*-------------------------------------------    
   TITLES
-------------------------------------------*/
#primary h1 {padding: 25px 0 0 0}


body#serv.prepare h1 {line-height: .5em;}
body#serv.prepare h1 strong {
	text-indent: -999em; display: block; width: 100%; height: 60px;  margin: 0;
	background: url(../images/title-prepare.png) no-repeat 100% 0; text-align: left;
}
body#serv.innovate h1 i {
	text-indent: -999em; display: block; width: 100%; height: 50px; 
	background: url(../images/title-ino.png) no-repeat 100% 0; text-align: left;
}
body#launch h1 i {
	text-indent: -999em; display: block; width: 100%; height: 60px; 
	background: url(../images/title-folio.png) no-repeat 100% 0; text-align: left;
}
body#launch h1 span {display: none;}

body#team h1 i {
	text-indent: -999em; display: block; width: 100%; height: 50px; 
	background: url(../images/title-team.png) no-repeat 100% 0; text-align: left;
}


body#blog h1 i {
	text-indent: -999em; display: block; width: 100%; height: 60px; 
	background: url(../images/title-blog.png) no-repeat 100% 0; text-align: left;
}
body#blog h1 i {
	text-indent: -999em; display: block; width: 100%; height: 63px; 
	background: url(../images/title-blog.png) no-repeat 93% 0; text-align: left;
}
body#blog h1 span {top: -10px; position: relative;}

body#contact h1 i {
	text-indent: -999em; display: block; width: 100%; height: 63px; 
	background: url(../images/title-contact.png) no-repeat 100% 0; text-align: left;
}
body#quote h1 i {
	text-indent: -999em; display: block; width: 100%; height: 63px; 
	background: url(../images/title-request.png) no-repeat 100% 0; text-align: left;
}




/*-------------------------------------------    
   BACKGROUNDS
-------------------------------------------*/
body#home #outer {background: url(../images/top1.jpg) repeat-x 50% 0}
body#home #inner {background: url(../images/top2.jpg) repeat-x 50% 155px}
body#home #deeper {background: url(../images/top3.jpg) repeat-x 50% 387px}
#container {width: 98%}
#prefooter {width: 98%}
#footwrap {width: 93%;}
#services {width: 95%;}
#services p { padding: 0; }


/*-------------------------------------------    
   HEADER
-------------------------------------------*/

header#masthead {height: 130px; position: relative;}
header .logo {
	width: 174px; /*margin-left: -87px;left: 50%;*/
	float:left;
	background: url(../images/logo-ribbon.png) no-repeat 50% 100%; 
	padding: 10px 0 55px 0;
}
header .logo span {font-size: 10px; letter-spacing: 0;}
/*header .logo:hover {padding: 30px 0 55px 0}
*/header .logo img {width: 80%;}


/*-------------------------------------------    
   INSIDE CONTAINER
-------------------------------------------*/
body#serv #primary {
	background: none; height: 780px;
}
#outer {background: url(../images/field1.jpg) repeat-x 50% 0}
body.expand header#masthead {height: 130px;}
body.expand #inner {
	background: url(../images/home-midfield.jpg) repeat-x 50% 230%; border-bottom: 1px solid #015F92;
}

#primary h1 {font-size: 4.3em; padding: 35px 25px 0 0; height: 107px; line-height: .7em}
#primary h1 strong {font-weight: 800;}

body#serv.prepare #primary {height: 910px;}
body.prepare #inner {
	background-position: 50% 170%; 
}
.pinfo12, .addr { /*margin-left:20px; margin-top:10px; */}

/*-------------------------------------------    
   SUBNAV
-------------------------------------------*/
#subnav {left: 25px}
#subnav { position: absolute; top: 55px; }
#subnav li {float: left; margin: 0 15px 0 0}
#subnav li a {display: block; width: 147px; height: 56px; text-align: center; font-size: 1em; color: #fff; background: url(../images/subnav-btn.png) no-repeat 0 -56px; line-height: 40px; text-shadow: 2px 2px 0 #000; text-transform: uppercase; letter-spacing: normal;}
#subnav li a:hover, #subnav .active a {background-position: 0 0;}


/*-------------------------------------------    
   INSIDE SERVICES
-------------------------------------------*/
body#serv section {width: 48%; position: absolute; z-index: 999;}
body#serv section h3 {font-size: 1em;}
body#serv section[role='design'] {
	top: 155px; left: 0;
}
body#serv section[role='multi'] {
	top: 135px; right: 10px;
}
body#serv section[role='mobile'] {
	top: 340px; left: 120px;
}
body#serv section[role='dev'] {
	bottom: 20px; right: 0;
	width: 64%; color: #fff;
}
body#serv section[role='cms'] {
	top: 145px; left: 0;
	width: 50%; 
}
body#serv section[role='seo'] {
	top: 340px; left: 0;
	width: 40%; 
}
body#serv section[role='stats'] {
	top: 150px; right: 0;
	width: 48%; 
}
body#serv section[role='ecommerce'] {
	top: 380px; right: 0;
	width: 28%; 
}
body#serv section[role='hosting'] {
	top: 640px; right: 0;
	width: 50%; color: #fff;
}

body#serv section[role='dev'] .serv-icon a {background-position: -76px -93px;}
body#serv section[role='dev'] article {padding: 0;}
body#serv section[role='ecommerce'] .serv-icon {height: 45px; margin: 0; left: -10px; position: relative;}
body#serv section[role='ecommerce'] .serv-icon .icon-ecommerce {
	margin: 0 auto; height: 45px; width: 45px;
	background-position: -545px -15px; left: 0; top: 0; padding: none;
}
body#serv section[role='ecommerce'] .serv-icon .icon-ecommerce:hover {background-position: -545px -95px;}
body#serv section[role='ecommerce'] h2 strong {display: block;}

body#serv section[role='seo'] p {padding: 0 30px 0 0;}
body#serv section[role='hosting'] p {padding: 0 30px 0 0; margin: 0 0 15px 0}

body#serv section[role='hosting'] h2 { text-transform: uppercase; font-size: 1.2em; line-height: 2em; margin: 0 0 10px;}
body#serv section[role='hosting'] h2 strong {display: block; font-size: 3.5em; letter-spacing: -2px; color: #fff; font-weight: 800; margin: 0 0 25px 0}

/* -- MOBI -- */
body#serv .mobi a {display: block; background: url(../images/innovate-mobile.png) no-repeat; width: 280px; height: 290px; position: absolute; top: 440px; left: 15px; text-indent: -999em;}

/* --- SCREENS -- */
body#serv .screens a {display: block; background: url(../images/innovate-screen.png) no-repeat; width: 380px; height: 271px; position: absolute; top: 320px; right: 0; text-indent: -999em;}

/* -- TWINS -- */
body#serv .twins a {display: block; background: url(../images/prepare-twins.png) no-repeat; width: 280px; height: 297px; position: absolute; top: 360px; left: 50%; margin-left: -110px; text-indent: -999em;}

/* -- SPACEBOY -- */
body#serv .spaceboy a {display: block; background: url(../images/design-trooper.png) no-repeat; width: 160px; height: 290px; position: absolute; bottom: 0; left: 20px; text-indent: -999em;}


/* -- BIG CTA -- */
body#serv .cta.big {position: absolute; bottom: 0; left: 140px;}
body#serv .cta.big:hover {background: rgba(0,0,0,1)}



/*-------------------------------------------    
   //// DETAIL ////  SERVICES & PAGES
-------------------------------------------*/
body.expand.details #outer {margin: 0 0 25px 0;} /* --- CHANGE VALUE = 0 WHEN ADDING BLOGS ---- */
body.expand.details #inner {background-position: 50% 180%;}
body.expand.details #primary {background: none;}

body.details #primary section {padding: 20px; width: 45%;}
body.details #primary #secondary {width: 45%; position: absolute; right: 0}
body#serv.details #primary {
	height: 870px;
}

/* --- ANALYTICS ---- */
body.details #primary.analytics section {width: 95%}
body#serv.details #primary.analytics .cta.big {top: 450px; left: 20px; right: auto;}

/* --- QUOTE LINK ---- */
body#serv.details #primary .big {
	max-width: 150px; height: 40px; 
	text-align: center; position: absolute; top: auto; bottom: 220px; right: 25px; left: auto; font-size: 1em; line-height: 40px;
}



/* --- SERVICE QUOTES ---- */
body#serv.details #primary aside {display: none;}
body#serv.details aside h3 {margin: 0 0 25px 0}
body#serv.details aside p {font-size: 1em;}


/* --- SERVICE BLOG POSTS ---- */
body#serv.details .blog-post {width: 45%; float: left; margin: 0 2.5%}
body#serv.details .brands {width: 100%;}


/* ---- FULL BLOG POST ----- */
body#blog.full-post #search {width: 180px;}
body#blog.full-post .blog-post img {border: 1px solid #666; margin: 0 0 25px 0; width: 100%;}


body#serv.details .trooper {position: absolute; bottom: -5px; left: 0;}


/* --- /////  SERVICE LOGOS  ///// ---- */
body#serv.details #primary .serv-icon {
	position: relative; width: 100px; height: 100px; margin: 0 20px 10px 0;
}

body#serv.details .serv-icon a {width: 100%; height: 100%; right: 0; position: relative;}
body#serv.details .icon-web-design {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/web-design-logo.png) no-repeat 0 0
}
body#serv.details .icon-multi {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/multi-logo.png) no-repeat 0 0
}
body#serv.details .icon-dev {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/web-dev-logo.png) no-repeat 0 0
}
body#serv.details .icon-mobile {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/mobile-logo.png) no-repeat 0 0
}
body#serv.details .icon-cms {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/cms-logo.png) no-repeat 0 0
}
body#serv.details .icon-stats {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/analytics-logo.png) no-repeat 0 0
}
body#serv.details .icon-seo {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/search-logo.png) no-repeat 0 0
}
body#serv.details .icon-ecommerce {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/commerce-logo.png) no-repeat 0 0
}



/* --- /// SERVICE FOOT LINKS //// --- */
body.details #primary #service-list {position: absolute; bottom: 0; width: 75%; right: 0; padding: 0 0 35px 0;}
body.details #primary #service-list h3 {font-size: 1.3em; margin: 0 0 30px 0}
#service-list .col {width: 50%; float: left}
#service-list ul li {margin: 0 0 15px}








/*-------------------------------------------    
   QUOTES
-------------------------------------------*/
body#launch aside, body#serv aside {width: 30%; position: absolute; bottom: 30px; left: 200px;}
body.expand aside blockquote .author {color: #fff;}
body.expand aside blockquote p {font-size: 1.1em; background: url(../images/quote.png) no-repeat 5% 5% rgba(0,0,0,0.9); border: none;}

body#launch aside {position: inherit; width: 100%;}


/*-------------------------------------------    
   PORTFOLIO
-------------------------------------------*/
body#launch #inside-wrap {background-position: 0 -35px}
body#launch #inner {
	background: url(../images/home-midfield.jpg) repeat-x 50% 100%; border-bottom: 1px solid #015F92;
}
body#launch #primary {height: 920px;}
body#launch #primary h1 {padding: 18px 20px 0 0; font-size: 4.2em;}

/* -- FOLIO SLIDER -- */
.folioslider {
	width: 100%; position: absolute; top: 155px; left: 0;
	background: url(../images/folio-shine.png) no-repeat 50% 236px;  
}

/* -- FOLIO PANEL -- */
.folio-panel {width: 100%;}



/* Direction Nav */
body#launch #next {width: 50px; height: 50px; margin: 0; display: block; background: url(../images/mini-arrows.png) no-repeat -50px 0; position: absolute; top: 10px; left: 50%; cursor: pointer; text-indent: -9999px; z-index: 999}
body#launch #next:hover {background-position: -50px -50px}

body#launch #prev {width: 50px; height: 50px; margin: 0; display: block; background: url(../images/mini-arrows.png) no-repeat 0 0; position: absolute; top: 10px; left: 50%; cursor: pointer; text-indent: -9999px; z-index: 999; margin-left: -50px}
body#launch #prev:hover {background-position: 0 -50px}



/* -- FOLIO THUMBS -- */
.pthumbs {
	margin: 80px auto 0 auto; width: 90%; max-width: 848px; 
	background: url(../images/folio-shadow.png) no-repeat 50% 100%; 
	padding: 0 0 50px 0;
}

.pthumbs li {float: left; height: auto;}

.pthumbs li.pA {width: 22.2877358%}
.pthumbs li.pB {width: 54.4245283%}
.pthumbs li.pC {width: 22.2877358%; float: right;}

.pthumbs li img {padding: 5px; background: #000; max-width: 100%;}
.pthumbs li:first-child img {padding: 5px 0 5px 5px}
.pthumbs li:last-child img {padding: 5px 5px 5px 0}
.pthumbs li:first-child, .pthumbs li:last-child {margin: 6% 0 0 0}

.pinfo {width: 90%; max-width: 930px; color: #fff; margin: 0 auto; padding: 20px 0 0 0; b}
.pinfo .col {float: left; width: 33.3333333%;}
.pinfo .col:first-child p {margin: 0 0 20px 0; padding: 0 20px 0 0}
.pinfo h2 {margin: 0 0 20px 0; font-weight: 300;}
.pinfo ul li {height: 37px; line-height: 30px; font-size: 1em; padding: 0 0 0 50px; margin: 0 0 10px 0; font-weight: normal; text-shadow: 1px 1px 0 #000;}

.pinfo .cta {position: absolute; top: -60px; left: 10px; font-size: .85em; padding: 0 20px}





/*-------------------------------------------    
   TROOPERS
-------------------------------------------*/
body#team #inner {
	background: url(../images/team_midfield.jpg) repeat-x 50% 100%; border-bottom: 1px solid #015F92;
}
body#team .shine {
	width: 100%; height: 970px;
	background: none;
}

/*-- TEAM WIRES --*/
body#team .team-wires {width: 432px; height: 101px; position: absolute; top: 357px; left: 50%; margin-left: -216px; background: url(../images/team-wires.png) no-repeat 0 0; text-indent: -999em;}

/*-- IGD LINK --*/
body#team #igd_btn {display: block; width: 289px; height: 326px; text-indent: -999em; background: url(../images/igd-hologram.png) no-repeat 0 0; position: absolute; bottom: -100px; left: 50%; margin-left: -144px;}

/*-- TEAM DARK BOX --*/
body#team .troopers_box {width: 100%; height: 368px; background: url(../images/trooper-dudes.png) no-repeat 50% 0; position: absolute; top: 65px; left: 0;}

/*-- TEAM CONTENT --*/
#team-content {width: 90%; margin:0 auto; padding: 315px 0 0 0}
#team-content .colA {float: left; width: 48.125%; background: rgba(0,0,0,0.7);}
#team-content .colB {float: right; width: 48.125%; background: rgba(0,0,0,0.7);}

#team-content section {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

#team-content .colA .content {padding: 20px 100px 20px 40px;}
#team-content .colB .content {padding: 20px 30px 20px 120px;}

body#team .content h3 {font-size: 1em; margin: 0 0 25px 0}
body#team .content p {color: #B9B9B9; font-size: .9em;}


/* --- TWEETS ---- */
body#team aside {display: none;}




/*-------------------------------------------    
  CONTACT
-------------------------------------------*/
body#contact #primary {width: 95%}
body#contact #inner {background-position: 50% 100%;}
body#contact #primary {height: 1000px}
body#contact .shine {
	width: 100%;
	background: url(../images/folio-shine.png) no-repeat 50% 342px;
}
body#contact #primary {background: url(../images/c-hologram.png) no-repeat 45% 95%}


body#contact #info h2 {height: 52px; background: url(../images/contact-icons.png) no-repeat 0 0; padding: 0 0 0 60px}
body#contact #form h2 {height: 52px; background: url(../images/contact-icons.png) no-repeat 0 -52px; padding: 0 0 0 60px}







 
/*-------------------------------------------    
   FEATURED
-------------------------------------------*/
#slidenav {top: 180px}

#featured {height:390px; position: relative; }
.pinfo1  { width: 100%; max-width: 930px; color: #fff; margin: 0 auto; padding: 20px 0 25px 0; position: relative; opacity: 0; text-align:justify; }

#featured h1, #featured h2 { text-indent: -9999em; margin: 70px 0 55px 0; height: 180px}
#featured h1 strong, #featured h2 strong {font-size: 8em; letter-spacing: -1px; line-height: 1.1em; color: #fff;}

#featured .designSlide h1 { background: url(../images/slide2.png) no-repeat 50% 25px; }
#featured .devSlide h2 { background: url(../images/slide3.png) no-repeat 50% 25px; }
#featured .mediaSlide h2 { background: url(../images/slide1.png) no-repeat 50% 25px; }
/*#featured .mediaSlide h2 { background: url(../images/home-slidetxt-4.png) no-repeat 50% 25px; }*/


.panel a, .cta {
	font-size: 1em;  padding: 0 30px; line-height: 2.5em;
	text-shadow: 0 2px 2px rgba(0,0,0,0.6);
}


/*-------------------------------------------    
   HOME - SERVICES
-------------------------------------------*/
#services {padding: 120px 0 10px 0; max-width: 960px; margin: 0 auto;}
.col  {  margin: 0 auto;width: 740px;text-align: justify; }
#services section {
	width: 22.9166667%;
	margin: 0 1.0416667%;
	float: left;
	text-align: center;
	position: relative;
}
body#home .serv-icon {background: url(../images/icon-shine.png) no-repeat 0 0;position: absolute; top: -120px; 
	left: 50%; margin-left: -46px;
}
#services h2 {font-size: 1.2em; font-weight: 300}
.col h2 { padding-bottom:10px; margin-bottom:10px; border-bottom:1px dotted #fff; }
/*-------------------------------------------    
   HOME - CONTAINER
-------------------------------------------*/
#midwrap {
	background: url(../images/home-midfield.jpg) repeat-x 50% 0; 
}
#container {background: url(../images/tab-shadow.png) no-repeat 130% 115px;}
#container #midglow {background: url(../images/home-responsive.png) no-repeat 0 100%; padding: 0}


#container section {
	width: 39.5833333%;
	float: left;
	padding: 0 0 0 3%;
}
#container aside {
	width: 53.125%;
	float: right;
	padding: 125px 0 0 0;
}

#container h2,#container h3 {
	font-size: 1.4em; letter-spacing:  normal;
}
#container .cta {font-size: .8em; padding: 0 20px;}

.check-list {margin: 0 0 15px 0}
.check-list li {font-size: 1em; margin: 0 0 5px 0; background: url(../images/check-bullet.png) no-repeat 0 0; padding: 0 0 0 30px;}

body#home blockquote p {font-size: 1em;}


/* --- ABOUT --- */
#about .brands {padding: 25px 0 0 0}
#about .cta {margin: 0 0 35px 0}



/*-------------------------------------------    
   HOME - TABS
-------------------------------------------*/
#tab-container {min-height: 340px;}
aside .tabs li a {font-size: 1em; line-height: 1.3em;
	background: url(../images/tab-ribbon.png) no-repeat;
	background-position: 50% -147px; 
}
.folio-btn {position: absolute; bottom: -20px; left: 0; }
aside .tabs li a span b {font-size: .8em}



/*-------------------------------------------    
  BLOG POSTS
-------------------------------------------*/
body#blog h1 {
	padding: 0; margin: 0; height: inherit; line-height: 44px; margin: 0 0 45px 0
}
body#blog h1 img {float: right; margin: 12px 0 0 15px}


body#blog #primary {width: 95%}
.blog-post figure img {display: block;}



.blog-post h2 {font-size: 1.4em;}
.blog-post .cta {padding: 0 20px;}
.blog-post img {width: 35%; margin: 0 1.5em 1.5em 0}
.blog-post .post {text-transform: none; font-size: 10px;}



/*-------------------------------------------    
  TOP NAVIGATION
-------------------------------------------*/
/*nav {height: 160px;}
*/
.navbar-static-top {
	display: inline-block;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: 50px !important;
    margin-top: 50px;
    width:280px;float:right;
}

.slides li { margin: 0 54px 20px !important; }

nav ul { height: 100%; position: relative;}
nav ul li {
	
	background: url(../images/nav-ribbon.png) no-repeat 50% -174px;
}
nav ul li a {
	font-size: 1em;
}

nav ul li a span {padding: 85px 0 0 0; background: url(../images/nav-icons.png) no-repeat 0 -15px;}
nav ul .n-quote {right: 0;}
nav ul li:hover  {
	background: url(../images/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
nav ul .n-services a span {background-position: -10px -20px;}
nav ul .n-portfolio a span {background-position: -10px -150px;}
nav ul .n-team a span {background-position: -15px -280px;}
nav ul .n-blog a span {background-position: -10px -410px;}
nav ul .n-contact a span {background-position: -10px -535px;}
nav ul .n-quote a span {background-position: -10px -668px;}

nav ul .n-services:hover span {background-position: -130px -20px;}
nav ul .n-portfolio:hover span {background-position: -130px -150px;}
nav ul .n-team:hover span {background-position: -135px -280px;}
nav ul .n-blog:hover span {background-position: -130px -410px;}
nav ul .n-contact:hover span {background-position: -130px -535px;}
nav ul .n-quote:hover span {background-position: -130px -668px;}

/*-------------------------------------------    
  ACTIVE MENU ITEMS
-------------------------------------------*/
body#serv nav ul .n-services {
	background: url(../images/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#serv nav ul .n-services span {background-position: -130px -20px;}

body#launch nav ul .n-portfolio {
	background: url(../images/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#launch nav ul .n-portfolio span {background-position: -130px -150px;}

body#team nav ul .n-team {
	background: url(../images/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#team nav ul .n-team span {background-position: -130px -280px;}

body#blog nav ul .n-blog {
	background: url(../images/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#blog nav ul .n-blog span {background-position: -130px -410px;}


body#contact nav ul .n-contact {
	background: url(../images/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#contact nav ul .n-contact span {background-position: -130px -535px;}


body#quote nav ul .n-quote {
	background: url(../images/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#quote nav ul .n-quote span {background-position: -130px -668px;}


/*-------------------------------------------    
  PREFOOTER
-------------------------------------------*/
#prefooter article {width: 60%; margin: 0 3%;  float: left; }
#prefooter aside {width: 30%; margin: 0 2%; float: right;}


/*-------------------------------------------    
  FOOTER NAVIGATION
-------------------------------------------*/
#foot-nav {
	width: 100%;
	float: left;
	height: 150px;
}
#foot-nav dt {font-size: 1.1em;}
#foot-nav dl {
	width: 23%;
	margin: 0 1%;
	float: left;
	
}
footer {
	position: relative;
	width: 100%;
	float: right;
	font-size: 11px; color: #999;
}
footer h2 {margin: 0}
footer h2 .cta {
	margin: 0 0 20px 0; font-size: 13px;
}


.igd-icon {
	left: 0; right: auto; bottom: -40px;
}

.wel_head { margin-bottom:15px; }
.pinfo .soon {display: none}

#awwwards, #cssda, #cssawards, #csswinner {display: none}
#enquiry-form { width:50%; }
#enquiry-form { margin-top:20px !important;}
.cnt_title_img { display:block; width:100%;}
.prod_btn, .pagena_btn {
    font-size: 1.1em; 
    text-transform: uppercase; color: #fff; border: none; cursor: pointer; background: #14B1DE; display: inline-block;  text-shadow: 0 2px 2px rgba(0,0,0,0.6); display: block; padding:5px;
     display:inline-block; 
    /* -- RADIUS -- */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    
    /* -- SHADOW -- */
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    
    /* -- GRADIENT -- */
    
    background-image: linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(16,167,213)),
        color-stop(0, rgb(13,121,164))
    );
    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

}
.prod_btn:hover, .pagena_btn:hover {
    color: #6CDFFF;
    background: rgba(0,0,0,.5); color: #6CDFFF;
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}
.table_title_right { text-align:right; font-size:12px;}
.pagena_btn { float:left; margin-right:10px;}
.select_state li { float:left; margin-right:10px; margin-bottom:15px;}
.districtlist { width:209px; float:left; margin-right:2%; min-height:150px; text-align:left; margin-bottom:15px;}
.select_state select { border:none; padding-left:5px;}
.select_state option { padding-left:5px;}
.singleproimg img { display:block; float:left; margin-right:3px;}
button, input, select, textarea { color:#000;}