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

	body {
		font-size: .750em;
		-webkit-text-size-adjust: none;
	}

	.social {
	
		display: none;
	}
	
	.mainmenu {
		float: none;
	}
    
}

@media only screen and (min-width: 768px) {
    
    .stage figure {
    
        text-align: right;
        width: 17.25% !important;    
    }
    
    .stage header {
        
        margin-left: 0; 
    }    
    
    
}
/* Stylesheet: mobile Modified On 2013-06-14 02:22:01 */
/* ==========================================================================
    Globals
   ========================================================================== */

a {
    color:#afe129;
	text-decoration: none;	
}

a:hover{

	text-decoration: underline;
}

h1 {

	font-family: 'Donegal One', 'Arial';
	font-weight: normal;
    text-shadow:0 0 2px #fff;
}

h1, * h1, h1 * {

	color:#9cb32e;
}

h2 {

	font-family: 'Donegal One', 'Arial';
	font-weight:normal;
	text-transform: none;
}

h2, * h2, h2 * {

	color:#000000;
}

h3 {

	font-family: 'ChaparralProRegular', 'Arial';

}

h3, * h3, h3 * {


}

h4 {

    font-family: 'ChaparralProRegular', 'Arial';
}

h4, * h4, h4 * {


}

p {

	font-family: 'Arial';
	color: #595a54;
}

blockquote {

	font-size: 1.286em;
	margin-right: 1em;
}

blockquote, blockquote p {
	font-family: 'Donegal One', 'Arial';
}

/* Let's remove the ugly quote mark at the end */
blockquote:after {
    content:none;
}

/*#############################################
 CUSTOM
###############################################*/

.footer-area p{

	font-size: 	0.857em;
	color: #b1b1b1;
}

/*#############################################
 DEVICE SUPPORT
###############################################*/

@media handheld, only screen and (max-width: 479px) {

}
/* Stylesheet: typography Modified On 2013-09-10 22:11:06 */
/*#############################################
 MAIN MENU
###############################################*/

#mainnav {

    width: auto;
	height: auto;
	
	padding: 0;
	margin: 0;
}

#mainnav li {
	
	float: left;
	display:block;
	
	width: auto;
	height: auto;
	
	margin: 0;
	padding: 0;
}

#mainnav li a{

	display: block;
	
  	padding:0 25px;
	margin: 0;
	
	line-height: 42px;
	
	font-size:1.286em;	
	font-family: 'Tahoma';
	text-align:center;
	color:#fff;
	text-decoration: none;
	
	outline: none;	
}

#mainnav li:hover a, #mainnav li.currentpage a {
	
	background: url(http://nopia.fi/static/images/nav_hover.png) no-repeat top center;
}

/*#############################################
 SIDE MENU
###############################################*/

.sidemenu {

	width: auto;
	height: auto;
	
	padding:0;
	margin: 0;
	
	overflow: hidden;
}

/* 1st level */

.sidemenu > ul {

	display:block;

	width: auto;
	height: auto;
	
	padding: 0;
	margin: 0;
}

.sidemenu > ul > li {

	display:block;
	
	width: auto;
	height: auto;
	
	margin: 0 0 4px 0;
	padding: 0;
}

.sidemenu > ul > li > a {

	display: block;
	
	width: auto;
	height: auto;
	line-height: 30px;
	
	margin: 0;
	padding: 0 5%;
	
	color: #585854;		
	font-size: 1.286em;
	text-decoration:none;
	text-align:left;	
	font-family: 'ChaparralProRegular', 'Arial';
	outline: none;
	
	border: 1px solid transparent;
	border-radius: 2px;
	
	cursor: pointer;
}

.sidemenu > ul  > li > a:hover {
		
	background: url(http://nopia.fi/static/images/filter_selected_white_bg.jpg) repeat-x;
	border: 1px solid #989a90;	
}

.sidemenu > ul > li > a:hover .check-icon {

	display: inline-block;
}

.sidemenu > ul > li.currentside > a {

	color: #fff;		
	background: url(http://nopia.fi/static/images/filter_selected_bg.jpg) repeat-x;
	border: 1px solid #9a160e;
}

.sidemenu > ul > li.currentside > a .check-icon {

	display: inline-block;
	background-position: 0 -12px;
}

/* 2nd level */

.sidemenu > ul > li  > ul {

	display:block;
	
	width: auto;
	height: auto;
	
	padding: 0;
	margin: 4px 0;
	
	background-color: #979790;
}

.sidemenu > ul > li > ul > li {

	display:block;
	
	width: auto;
	height: auto;
	
	margin: 0;
	padding: 0;
	
	border: none;
}

.sidemenu > ul > li > ul > li > a {

	display: block;
	
	width: auto;
	height: auto;
	line-height: 30px;
	
	padding-left: 10%;
	margin: 0;

	color: #585854;		
	font-size: 1em;
	text-decoration:none;

	text-align:left;	
	font-weight:normal;
	font-family: 'ChaparralProRegular', 'Arial';
	outline: none;
	
	background: url(http://nopia.fi/static/images/filter_arrow_right.png) no-repeat 5% 0;
}

.sidemenu > ul > li > ul > li.currentsubside {

	background: url(http://nopia.fi/static/images/filter_selected_grey_bg.jpg) repeat-x;	
}

.sidemenu > ul > li > ul > li.currentsubside > a {

	color: #fff;
	background-position: 5% -30px;	
}

/* 3rd level */

.sidemenu > ul > li > ul > li > ul {

	display:block;
	
	width: auto;
	height: auto;
	
	padding: 0;
	margin: 4px 0;
}

.sidemenu > ul > li > ul > li > ul  > li {

	display:block;
	
	width: auto;
	height: auto;
	
	margin: 0;
	padding: 0;
}

.sidemenu > ul > li > ul > li > ul  > li > a {

	display: block;
	
	width: auto;
	height: auto;
	line-height: 30px;
	
	padding-left: 12%;
	margin: 0;

	color: #585854;
	font-size: 1em;
	text-decoration:none;

	text-align:left;	
	font-weight:normal;
	font-family: 'ChaparralProRegular', 'Arial';
	outline: none;
}

.sidemenu > ul > li > ul > li > ul  > li.currentsubsubside > a {
	
	font-weight: bold;
}

/* All levels */

.sidemenu a .check-icon {

	display: none;
	float: right;
	
	margin-top: 10px;	
}

/* 2nd level and children */

.sidemenu > ul > li > ul > li a:hover {

    color: #fff;
}
/* Stylesheet: menu Modified On 2013-06-07 10:47:02 */
/* ==========================================================================
    Globals
   ========================================================================== */

body {

	background-color: #333333;
}

/* ==========================================================================
    Blocks / Container areas
   ========================================================================== */

.block {

	position: relative;
}

.top-container {

	background-color: #000;
}

.menu-block {
	
	background: url(http://nopia.fi/static/images/menu_block_bg2.png) transparent repeat-x;	
}

.header-block {
  
	/*max-height: 530px;*/
	
	overflow: hidden;
}

.content-block {

	border-top: 1px solid #808079;	
    background: url(http://nopia.fi/static/images/content_block_bg.jpg) #fff repeat-x;  
}

.content-area {

	padding: 20px 40px 40px 40px;
	background-color: #000;	
	overflow: hidden;
}

.footer-area {

	padding: 0 40px 10px 40px;
	color: #b1b1b1;
}

.footer-section {

	padding: 20px 0;
}

.footer-block {

	border-top: 10px solid #4e4e4e;
	background: url(http://nopia.fi/static/images/footer_block_bg.jpg) repeat-x;
}

/* ==========================================================================
	Showcases
   ========================================================================== */
 
/* Categories */
.showcase-categories {

	margin: 0 auto 1.5em auto;
	
	width: 90%;
	
	text-align: center;
	
}

.showcase-categories a{

	padding: 0 3px;
	font-family: 'Tahoma';
	font-weight: bold;
	font-size: 0.786em;
}
 
 
/* List */
.showcase-list {

	margin: 0 auto;
	padding: 0;
	
	width: 90%;
	
	text-align: center;
	
}

.showcase-list :nth-child(3n) {

	margin-right: 0;
}

.showcase-list li{

	float: left;

	width: 32%;
	margin-right: 2%;
	margin-bottom: 20px;
	
	list-style-type: none;
	
    -moz-transition: -moz-transform 0.3s ease-in-out 0s;
    -webkit-transition: -webkit-transform 0.3s ease-in-out 0s;
    -o-transition: -o-transform 0.3s ease-in-out 0s;
    -ms-transition: -ms-transform 0.3s ease-in-out 0s;	
}

.showcase-list li:hover{
	
	z-index: 100;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);	
}


.showcase-list li figure{

	margin-bottom: 8px;
}
   

.showcase-list li a{

	font-family: 'Donegal One', 'Arial';
	color: #444;
	font-size: 1.071em;
}

/* ==========================================================================
	Stage
   ========================================================================== */

.stage-elements {

	position: relative;
	display: block;
	
	width: 100%;
	height: 100%;	
}

.stage-element {

	display: block;
	
	width: 100%;
	height: 100%;	
}

/* ==========================================================================
	Social media
   ========================================================================== */ 
   
.social {
	
	margin-top: 12px;
} 

.social a{

	position: relative;
	float: left;
	display: block;
	
	width: 18px;
	height: 18px;
	
	margin-right: 6px;
	text-align: center;
	
    -moz-transition: -moz-transform 0.3s ease-in-out 0s;
    -webkit-transition: -webkit-transform 0.3s ease-in-out 0s;
    -o-transition: -o-transform 0.3s ease-in-out 0s;
    -ms-transition: -ms-transform 0.3s ease-in-out 0s;

	border-radius: 2px;
    
    overflow: hidden;
}

.social a .icon-bg {
	
	z-index: 10;

	margin: 2px auto 0 auto;
	display: block;
	
	width: 12px;
	height: 12px;

	background-color: #fff;
}

.social a .icon{

	z-index: 20;
	position: relative;
	display: block;

	margin-top: -16px;
	font-size: 14px;
} 

.social a:hover {

	text-decoration: none;
	
	z-index: 100;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);	
}

.social .facebook {

	background-color: #5473ad;
	border: 1px solid #4c6ca8;
}  

.social .facebook .icon{

	color: #5473ad;
}  

.social .googleplus {

	background-color: #db4935;
	border: 1px solid #c14130;
} 

.social .googleplus .icon {

	color: #db4935;
}

.social .vimeo {

	background-color: #0dadd6;
	border: 1px solid #0c9ec3;
}

.social .vimeo .icon{

	color: #0dadd6;
}    

.social .twitter {

	background-color: #2c83c4;
	border: 1px solid #2672aa;
}  

.social .twitter .icon-bg {

	background-color: transparent;
}

.social .twitter .icon{

	background-color: transparent;
	color: #fff;
}  

.social .youtube {

    background-color: #e62016;
	/*border: 1px solid #0c9ec3;*/
}

.social .youtube .icon{

    font-size: 16px;
	color: #e62016;
}   
 
/* ==========================================================================
	Misc
   ========================================================================== */
   
.ajax-indicator-128 {

	display: block;
	
	width: 128px;
	height: 128px;
	
	margin: 50px auto;
	
	background: url(http://nopia.fi/static/images/ajax_loader.gif) no-repeat;	
}

.ajax-indicator-bg-128 {

	background: url(http://nopia.fi/static/images/ajax_loader.gif) no-repeat center center;	
}
   
.logo-vertical {
   
	text-align: center;
	margin-bottom: 20px;
    padding: 0 10px;
}

.colorbox-item, .colorbox-item:hover {
 
    outline: none !important;
}

.lazyload img {

	display: none;
}

.container {
	padding-left: 0;
	padding-right: 0;
}
/* Stylesheet: main Modified On 2024-02-19 18:29:35 */