/*
 * ------------------------------------------------------------------------
 * Corpora Premium Template for joomla 2.5
 * ------------------------------------------------------------------------
 * Copyright (C) 2012 Sasu Themes. All Rights Reserved.
 * @license - Copyrighted Commercial Software
 * Author: dmsumon (Sasu Themes)
 * Websites: http://www.dmsumon.com
  * This file may not be redistributed in whole or significant part.
 * ------------------------------------------------------------------------
*/



/* CSS for tablets/iPad
--------------------------------------------------------- */


@media only screen and (min-width: 768px) and (max-width: 949px) {
	
	
    
    
body {
  -webkit-text-size-adjust: 100%; /*Fix Mobile Safari Font Scale*/
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
.main {
  width: 700px !important;
}

/* MAIN NAVIGATION 
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav {
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}

/* Mega Menu Layout ---*/
.ja-megamenu {
  clear: both;
  height: auto;
  display: none !important;
}
.ja-megamenu.active {
  display: block !important;
}

.ja-megamenu .megacol,
.ja-megamenu li.mega .childcontent,
.ja-megamenu li.mega .childcontent .childcontent-inner-wrap,
.ja-megamenu li.mega .childcontent .childcontent-inner-wrap .childcontent-inner {
	display: none !important;
}

.ja-megamenu ul.level0 li.mega {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border-top: 1px solid #353637 !important;
  border-bottom: 0 !important;
  min-height: 0 !important;
}

.ja-megamenu ul.level0 li.over {
	border-left: 0 !important;
	border-right: 0 !important;
}

.ja-megamenu ul.level0 li.active,
.ja-megamenu ul.level0 li.mega {
	border-color: #353637 !important;
}

.ja-megamenu ul.level0 li.mega a.mega {
  height: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  background: #151617;
  min-height: 0 !important;
}

.ja-megamenu ul.level0 li.mega span.menu-title,
.ja-megamenu ul.level0 li.haschild span.menu-title {
  font-size: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

.ja-megamenu ul.level0 li.mega span.menu-title {
	font-size: 100% !important;
}

.ja-megamenu ul.level1 li.mega span.menu-title {
  margin-top: 0 !important;
}

.ja-megamenu ul.level1 li.mega {
  height: auto !important;
}

.ja-megamenu ul.level1 li.mega a.mega {
  height: auto !important;
}

.ja-megamenu ul.level0 li.mega span.menu-desc {
  display: none;
}

/* Mega Menu Stylings --- */
.ja-megamenu {
  background: #fafbfc !important;
}

.ja-megamenu ul.level0 li.mega {
  border-top: 1px solid #e5e6e7;
  text-align: center;
}

.ja-megamenu ul.level0 li.mega span.menu-title{
    -webkit-text-shadow: none;
    -moz-text-shadow: none;
    -o-text-shadow: none;
    text-shadow: none;    
}

.ja-megamenu a {
	color: #fff !important;
}

.ja-megamenu a:hover,
.ja-megamenu a:focus {
	color: #fff;
}

/* Menu Button --- */
/* to use this value to detect responsive
 * > 3: mean responsive
 * 4: is mobile device, which the menu show only first level
 */
#ja-menu-button {
  display: block;
  font-size: 100%;
  font-weight: normal;
  padding: 10px;
  text-transform: uppercase;
  z-index: 4;
  background: #151617;
  color: #fff;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
}

#ja-menu-button:hover,
.rjd-active #ja-menu-button {
  color: #fff;
  cursor: pointer;
  background: #D62831;
}

.rjd-active #ja-menu-button {
  border-radius: 0;
  border-bottom-width: 0;
  border-color: #e5e6e7;
}

#contact-form dl dt {
  float: none;
}

#contact-form dl dd {
  margin-left: 0 !important;
}

#contact-form dl dd input.required,
#contact-form dl dd textarea.required {
  width: 60% !important;
}

.ja-megamenu ul.level0 li.mega a.mega:hover{
    background: #D62831;
}

.ja-megamenu ul.level0 li.mega a.mega{
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;    
}

/*************************** logo *****************************************/


#ja-header h1.logo,
#ja-header h1.logo a{
    width: 250px;
}

#ja-search #mod-search-searchword{
    width: 200px;
}


/*************************** slider *****************************************/

#ja-slider .gkIsWrapper-gk_bikestore figcaption h3{
    font-size: 32px;
}


/************************ corpora-tab ************************************/

div.corpora-tab ul.gkTabs {
    border: none !important;
}

div.corpora-tab ul.gkTabs li{
    float: none;
    border: 1px solid #ddd !important;
    border-top: none !important;
}

div.corpora-tab ul.gkTabs li:hover, 
div.corpora-tab ul.gkTabs li.active {
    border-bottom: 1px solid #ddd !important;
}

div.corpora-tab div.gkTabContainer0{
    margin-top: 90px;
    padding-top: 15px;
}


/************************ ja-projects ************************************/

#ja-projects div.projects div.ja-box-ct{
    margin-left: 44px;
}

/************************ ja-clients ************************************/

#ja-clients #piecemaker_holder, 
#ja-clients #piecemaker{
    width: 670px !important;
}

/************************ featured-project ************************************/

div.featured-project div.nspArt,
div.featured-project img.nspImage{
    width: 100% !important;
    height: auto !important;
}

div.featured-project h4.nspHeader{
    width: 82%;
}

div.featured-project h4.nspHeader a{
    display: block;
}

/************************ k2 blog  ************************************/

span.catItemImage img, 
span.itemImage img, 
span.tagItemImage img,
span.userItemImage img,
div.blog div.contentpaneopen p > img, 
div.item-page p > img{
    max-width: 68%;
}


/************************ portfolio-3-columns  ************************************/


div.portfolio-3-columns img.nspImage{
    max-width: 200px !important;
    height: 112px !important;
}


div.portfolio-3-columns span.over{
    max-width: 212px !important;
    height: 124px !important;
}

div.portfolio-3-columns span.over span{
	font-size: 12px;
}
/************************ portfolio-4-columns  ************************************/


div.portfolio-3-columns img.nspImage{
    max-width: 140px !important;
    height: 95px !important;
}


div.portfolio-3-columns span.over{
    max-width: 152px !important;
    height: 107px !important;
}


/************************ portfolio-2-columns  ************************************/


div.portfolio-2-columns img.nspImage{
    max-width: 100% !important;
    height: 181px !important;
}


div.portfolio-2-columns span.over{
    max-width: 105% !important;
    height: 193px !important;
}

/***************** registration form ************************/

	textarea#description{
		width: 80% !important;
	}	
	
	
	
}





/* CSS for mobile phones/ smart phones/ PDA
--------------------------------------------------------- */


@media only screen and (min-width: 480px) and (max-width: 767px) { 
	
	
	
    
    
body {
  -webkit-text-size-adjust: 100%; /*Fix Mobile Safari Font Scale*/
}


/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
.main {
  width: 100% !important;
  max-width: 690px;
}


/* MAIN NAVIGATION 
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav {
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}

/* Mega Menu Layout ---*/
.ja-megamenu {
  clear: both;
  height: auto;
  display: none !important;
}
.ja-megamenu.active {
  display: block !important;
}

.ja-megamenu .megacol,
.ja-megamenu li.mega .childcontent,
.ja-megamenu li.mega .childcontent .childcontent-inner-wrap,
.ja-megamenu li.mega .childcontent .childcontent-inner-wrap .childcontent-inner {
	display: none !important;
}

.ja-megamenu ul.level0 li.mega {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border-top: 1px solid #353637 !important;
  border-bottom: 0 !important;
  min-height: 0 !important;
}

.ja-megamenu ul.level0 li.over {
	border-left: 0 !important;
	border-right: 0 !important;
}

.ja-megamenu ul.level0 li.active,
.ja-megamenu ul.level0 li.mega {
	border-color: #353637 !important;
}

.ja-megamenu ul.level0 li.mega a.mega {
  height: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  background: #151617;
  min-height: 0 !important;
}

.ja-megamenu ul.level0 li.mega span.menu-title,
.ja-megamenu ul.level0 li.haschild span.menu-title {
  font-size: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

.ja-megamenu ul.level0 li.mega span.menu-title {
	font-size: 100% !important;
}

.ja-megamenu ul.level1 li.mega span.menu-title {
  margin-top: 0 !important;
}

.ja-megamenu ul.level1 li.mega {
  height: auto !important;
}

.ja-megamenu ul.level1 li.mega a.mega {
  height: auto !important;
}

.ja-megamenu ul.level0 li.mega span.menu-desc {
  display: none;
}

/* Mega Menu Stylings --- */
.ja-megamenu {
  background: #fafbfc !important;
}

.ja-megamenu ul.level0 li.mega {
  border-top: 1px solid #e5e6e7;
  text-align: center;
}

.ja-megamenu ul.level0 li.mega span.menu-title{
    -webkit-text-shadow: none;
    -moz-text-shadow: none;
    -o-text-shadow: none;
    text-shadow: none;    
}

.ja-megamenu a {
	color: #fff !important;
}

.ja-megamenu a:hover,
.ja-megamenu a:focus {
	color: #fff;
}

/* Menu Button --- */
/* to use this value to detect responsive
 * > 3: mean responsive
 * 4: is mobile device, which the menu show only first level
 */
#ja-menu-button {
  display: block;
  font-size: 100%;
  font-weight: normal;
  padding: 10px;
  text-transform: uppercase;
  z-index: 4;
  background: #151617;
  color: #fff;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
}

#ja-menu-button:hover,
.rjd-active #ja-menu-button {
  color: #fff;
  cursor: pointer;
  background: #D62831;
}

.rjd-active #ja-menu-button {
  border-radius: 0;
  border-bottom-width: 0;
  border-color: #e5e6e7;
}

#contact-form dl dt {
  float: none;
}

#contact-form dl dd {
  margin-left: 0 !important;
}

#contact-form dl dd input.required,
#contact-form dl dd textarea.required {
  width: 60% !important;
}

.ja-megamenu ul.level0 li.mega a.mega:hover{
    background: #D62831;
}

.ja-megamenu ul.level0 li.mega a.mega{
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;    
}


/*************************** logo *****************************************/


#ja-header .main div.main-inner1{
    padding-bottom: 70px;
}

#ja-header h1.logo{
    float: none;
}

#ja-header h1.logo,
#ja-header h1.logo a{
    width: 100%;
}

#ja-search{
    left:122px;
    bottom: 20px;
}

#ja-search #mod-search-searchword{
    width: 200px;
}

/*************************** ja-promo *****************************************/

#ja-promo div.promo p.heading{
    line-height: 40px;
}

#ja-promo div.promo p.desc{
    line-height: 30px;
}


/*************************** slider *****************************************/

#ja-slider .gkIsWrapper-gk_bikestore figcaption h3{
    font-size: 32px;
}


/************************ corpora-tab ************************************/

div.corpora-tab ul.gkTabs {
    border: none !important;
}

div.corpora-tab ul.gkTabs li{
    float: none;
    border: 1px solid #ddd !important;
    border-top: none !important;
}

div.corpora-tab ul.gkTabs li:hover, 
div.corpora-tab ul.gkTabs li.active {
    border-bottom: 1px solid #ddd !important;
}

div.corpora-tab div.gkTabContainer0{
    margin-top: 90px;
    padding-top: 15px;
}



/************************ ja-clients ************************************/

#ja-clients #piecemaker_holder, 
#ja-clients #piecemaker{
    width: 570px !important;
}



/************************ featured-project ************************************/

div.featured-project div.nspArt,
div.featured-project img.nspImage{
    width: 100% !important;
    height: auto !important;
}

div.featured-project h4.nspHeader{
    width: 82%;
}

div.featured-project h4.nspHeader a{
    display: block;
}


/************************ k2 blog  ************************************/

span.catItemImage img, 
span.itemImage img, 
span.tagItemImage img,
span.userItemImage img,
div.blog div.contentpaneopen p > img, 
div.item-page p > img{
    width: 407px !important;
}


/************************ portfolio-3-columns  ************************************/


div.portfolio-3-columns img.nspImage{
    max-width: 175px !important;
    height: 98px !important;
}


div.portfolio-3-columns span.over{
    max-width: 187px !important;
    height: 110px !important;
}

div.portfolio-3-columns span.over span{
	font-size: 9.5px;
	padding: 5px 11px 5px 7px;
}

/************************ portfolio-4-columns  ************************************/


div.portfolio-3-columns img.nspImage{
    max-width: 100px !important;
    height: 80px !important;
}


div.portfolio-3-columns span.over{
    max-width: 112px !important;
    height: 92px !important;
}

div.portfolio-4-columns span.over span{
	width: 72px;
	left: 10%;
}



div.login button.button{
	margin-left: 35%;
}

#user-registration button.validate{
	margin-left: 40%;
}



/************************ portfolio-2-columns  ************************************/


div.portfolio-2-columns img.nspImage{
    max-width: 100% !important;
    height: 181px !important;
}


div.portfolio-2-columns span.over{
    max-width: 105% !important;
    height: 193px !important;
}

/***************** registration form ************************/

	textarea#description{
		width: 60% !important;
	}		
	
	
	
}




/* CSS for mobile phones
--------------------------------------------------------- */



@media only screen and (max-width: 479px) {
	
	
	
/****************************************************************/
body {
  -webkit-text-size-adjust: 100%; /*Fix Mobile Safari Font Scale*/
}


/************************ general ************************************/


#ja-right, #ja-left, .column{
    float: none !important;
    width: 100% !important;
}

.column {
    float: none;
    width: 100% !important;
}

#ja-mainbody, #ja-right{
    width: 100% !important;
}

#ja-main div.inner{
    padding: 0 5px !important;
}


div.ja-moduletable{
    margin-left: 40px !important;
    margin-right: 40px !important;
}

#ja-right1 div.ja-moduletable{
    margin-left: 25px !important;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
.main {
  width: 100% !important;
  max-width: 300px !important;
}


/* MAIN NAVIGATION 
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav {
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}

/* Mega Menu Layout ---*/
.ja-megamenu {
  clear: both;
  height: auto;
  display: none !important;
}
.ja-megamenu.active {
  display: block !important;
}

.ja-megamenu .megacol,
.ja-megamenu li.mega .childcontent,
.ja-megamenu li.mega .childcontent .childcontent-inner-wrap,
.ja-megamenu li.mega .childcontent .childcontent-inner-wrap .childcontent-inner {
	display: none !important;
}

.ja-megamenu ul.level0 li.mega {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border-top: 1px solid #353637 !important;
  border-bottom: 0 !important;
  min-height: 0 !important;
}

.ja-megamenu ul.level0 li.over {
	border-left: 0 !important;
	border-right: 0 !important;
}

.ja-megamenu ul.level0 li.active,
.ja-megamenu ul.level0 li.mega {
	border-color: #353637 !important;
}

.ja-megamenu ul.level0 li.mega a.mega {
  height: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  background: #151617;
  min-height: 0 !important;
}

.ja-megamenu ul.level0 li.mega span.menu-title,
.ja-megamenu ul.level0 li.haschild span.menu-title {
  font-size: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

.ja-megamenu ul.level0 li.mega span.menu-title {
	font-size: 100% !important;
}

.ja-megamenu ul.level1 li.mega span.menu-title {
  margin-top: 0 !important;
}

.ja-megamenu ul.level1 li.mega {
  height: auto !important;
}

.ja-megamenu ul.level1 li.mega a.mega {
  height: auto !important;
}

.ja-megamenu ul.level0 li.mega span.menu-desc {
  display: none;
}

/* Mega Menu Stylings --- */
.ja-megamenu {
  background: #fafbfc !important;
}

.ja-megamenu ul.level0 li.mega {
  border-top: 1px solid #e5e6e7;
  text-align: center;
}

.ja-megamenu ul.level0 li.mega span.menu-title{
    -webkit-text-shadow: none;
    -moz-text-shadow: none;
    -o-text-shadow: none;
    text-shadow: none;    
}

.ja-megamenu a {
	color: #fff !important;
}

.ja-megamenu a:hover,
.ja-megamenu a:focus {
	color: #fff;
}

/* Menu Button --- */
/* to use this value to detect responsive
 * > 3: mean responsive
 * 4: is mobile device, which the menu show only first level
 */
#ja-menu-button {
  display: block;
  font-size: 100%;
  font-weight: normal;
  padding: 10px;
  text-transform: uppercase;
  z-index: 4;
  background: #151617;
  color: #fff;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
}

#ja-menu-button:hover,
.rjd-active #ja-menu-button {
  color: #fff;
  cursor: pointer;
  background: #D62831;
}

.rjd-active #ja-menu-button {
  border-radius: 0;
  border-bottom-width: 0;
  border-color: #e5e6e7;
}

#contact-form dl dt {
  float: none;
}

#contact-form dl dd {
  margin-left: 0 !important;
}

#contact-form dl dd input.required,
#contact-form dl dd textarea.required {
  width: 60% !important;
}

.ja-megamenu ul.level0 li.mega a.mega:hover{
    background: #D62831;
}

.ja-megamenu ul.level0 li.mega a.mega{
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;    
}



/*************************** logo *****************************************/


#ja-header .main div.main-inner1{
    padding-bottom: 100px;
}

#ja-header h1.logo{
    float: none;
    margin-left: 12px;
}

#ja-header h1.logo a{
    background: url("../images/corpora/logo-mobile-port.png") no-repeat scroll left center transparent !important;
}

#ja-header h1.logo,
#ja-header h1.logo a{
    width: 100%;
}

#ja-search{
    left:22px;
    bottom: 20px;
    width: 100%;
}

#ja-search #mod-search-searchword{
    width: 180px;
}


/*************************** ja-promo *****************************************/

#ja-promo div.promo p.heading{
    line-height: 40px;
}

#ja-promo div.promo p.desc{
    line-height: 30px;
}

/*************************** slider *****************************************/

#ja-slider .gkIsWrapper-gk_bikestore figcaption h3{
    font-size: 12px;
}

.gkIsWrapper-gk_bikestore figcaption.left{
    left: 0;
    bottom: 0 !important;
}

#ja-slider .gkIsButtons{
    display: none;
}

#ja-slider .gkIsWrapper-gk_bikestore figcaption h3{
    background: rgba(214, 40, 49, 0.6);
}

/************************ corpora-tab ************************************/

div.corpora-tab ul.gkTabs {
    border: none !important;
}

div.corpora-tab ul.gkTabs li{
    float: none;
    border: 1px solid #ddd !important;
    border-top: none !important;
}

div.corpora-tab ul.gkTabs li:hover, 
div.corpora-tab ul.gkTabs li.active {
    border-bottom: 1px solid #ddd !important;
}

div.corpora-tab div.gkTabContainer0{
    margin-top: 90px;
    padding-top: 15px;
}

/************************ ja-clients ************************************/

#ja-clients #piecemaker_holder, 
#ja-clients #piecemaker{
    width: 200px !important;
}



/************************ k2 blog  ************************************/

span.catItemImage img, 
span.itemImage img, 
span.tagItemImage img,
span.userItemImage img,
div.blog div.contentpaneopen p > img, 
div.item-page p > img{
    width: 283px !important;
}

#ja-mainbody div.catItemHeader > span, 
#ja-mainbody div.itemHeader > span, 
#ja-mainbody div.tagItemHeader > span,
#ja-mainbody div.catItemHeader span.catItemAuthor, 
#ja-mainbody div.itemHeader span.itemAuthor,
#ja-mainbody span.userItemDateCreated,
#ja-mainbody span.userItemCategory,
#ja-mainbody span.userItemCommentsLink,

dl.article-info dd,
dt.article-info-term{
    display: block !important;
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
    font-size: 12px !important;
    text-align: center;
    border-right: none !important;
    margin-left: 0 !important;
}

dl.article-info{
 display: block !important;
 width: 100%;
}

div.catItemHeader span.catItemDateCreated, 
div.itemHeader span.itemDateCreated, 
div.tagItemHeader span.tagItemDateCreated,

div.catItemHeader span.catItemCategory, 
div.itemHeader span.itemCategory, 
div.tagItemHeader span.tagItemCategory,

div.catItemHeader > span, div.itemHeader > span, 
div.tagItemHeader > span, 
div.catItemHeader span.catItemAuthor, 
div.itemHeader span.itemAuthor,

div.catItemHeader span.catItemCommentsLink, 
div.itemHeader span.post-comment,

#ja-mainbody span.userItemDateCreated,
#ja-mainbody span.userItemCategory,
#ja-mainbody span.userItemCommentsLink,
dl.article-info dd,
dt.article-info-term{
    background-position: 42px 0;
    
    border-bottom: 1px dashed #ddd;
}

div.catItemHeader h3.catItemTitle, div.itemHeader h2.itemTitle, div.tagItemHeader h2.tagItemTitle{
    text-align: center;
}

/************************ pagination  ************************************/

div.k2Pagination ul li{
    display: block !important;
    margin-bottom: 20px;
}

div.pagination ul li{
	margin-bottom: 20px;
	margin-left: 85px;
	float: none;
}

/************************ portfolio-3-columns  ************************************/

div.portfolio-3-columns{
    margin-left: 10px !important;
}

div.portfolio-3-columns img.nspImage{
    max-width: 95% !important;
    height: auto !important;
}


div.portfolio-3-columns span.over{
    max-width: 100% !important;
    height: 100% !important;
}

div.portfolio-3-columns div.nspArt{
    float: none;
    width: 100% !important;
}

/************************ portfolio-2-columns  ************************************/


div.portfolio-2-columns img.nspImage{
    max-width: 100% !important;
    height: 181px !important;
}


div.portfolio-2-columns span.over{
    max-width: 105% !important;
    height: 193px !important;
}

div.login button.button{
	margin-left: 19px;
}

#user-registration button.validate{
	margin-left: 0;
}


.item{
	float: none !important;
	width: 100% !important;
}


.k2AccountPage table tr td{
	display: block !important;
}


.k2AccountPage table tr td textarea{
	width: 87% !important;
}	


/***************** registration form ************************/

	textarea#description{
		width: 85% !important;
	}	

	
}